Как сделать скриншот элемента или всего окна по клику?

Question

[Ruslan Website]

Html2canvas, как я понял, уже не работает. Может, есть бесплатные api?

Comments

[Ивор Барханский]

А системный скриншот средствами ОС не вариант?

[Ruslan Website]

Игорь, конечно нет, думаешь я не знаю как обычный скриншот сделать? скриншот должен создаваться при взаимодействии с сайтом и отправляться мне на почту или телеграм.

[Ивор Барханский]

Ruslan Website, думаю, что разработчики выделяют тонны ресурсов и сильно переусложняют свои продукты, решая уже решённые задачи и добавляя фичи, дублирующие уже существующие. А потом все удивляются, почему для сайтов нужны сотни мегабайт ОЗУ, например.

[Ruslan Website]

Игорь, ты вообще не понял вопрос, расслабься

Answer 1

[Stalker_RED]

Почему не работает?

Первый попавшийся пример по запросу "html2canvas example"

Comments

[twobomb]

Он корректно работает только на примитивных стилях, что-то чуть более сложное и всё уезжает

[Ruslan Website]

Спасибо, работает, просто я не ту библиотеку подключал. А не скажешь как сделать скрин динамически созданного скриптом элемента?

[Stalker_RED]

Ruslan Website, а что с ними не так?
jsfiddle.net/f6gLqcuw

[Ruslan Website]

Stalker_RED, код подправил проверил, действительно работает.
Но в рабочем проекте не хочет https://new.ruslan.website/led/

Вот форма которая заполняется


А вот элемент который создался после заполнения формы


И он не сринится, скринится только 1 маленькая картинка в углу - шаг пикселя, больше ничего нет.

Подскажи пожалуйста, буду очень благодарен.

[Stalker_RED]

Ruslan Website, я давненко с этими штуками не сталкивался. Альтернативы есть, но насколько корректно они смогут отобразить вашу верстку заранее невозможно предсказать.
А вам это все для чего? Накрайняк можно жать PrintScreen, ctrl+v
Или вообще средствами девтулс делать скриншот.

Хотя, если это не для собственных нужд, то пользователям это может быть сложно объяснить.

[Ruslan Website]

Stalker_RED, 0бычный скриншот я конечно знаю как делать.
Задача очень простая. Нужно чтобы посетитель заполнил форму и нажал "оставить заявку на расчет" а мне на почту или телеграм приходила картинка со второго скриншота в предыдущем комментарии со всеми параметрами.
Просто текстом мне не пойдет, нужно чтобы именно картинка приходила, в идеале конечно чтобы приходили в виде картинки параметры вместе с визуализацией справа, т.е. скрин всего экрана, но хотя бы параметры.

[Stalker_RED]

Ruslan Website, ну, с параметрами проще, ещё в прошлом тысячелетии предки придумали такую штуку как "отправка формы", а сейчас даже ajax-ом можно.

А визуализация у вас чем отрисовывается? Вполне вероятно, что у этой рисовалки есть свой метод "скриншота".

[Ruslan Website]

Stalker_RED, я же говорю отправка формы текстом мне не нужна, это я могу сделать, мне нужна именно картинка с параметрами. Для визуализации есть метод скрина (его делал не я, и узнать кто делал не могу) а вот для параметров нет, я в коде не могу понять как зацепить еще и параметры, и в нем я точно не разберусь, он слишком сложный для моего уровня, поэтому хотел скринить параметры отдельным скриптом.

Answer 2

[Ironface]

Ещё можно попробовать dom-to-image.
https://github.com/tsayen/dom-to-image