Как сделать скриншот html

Take Screenshots With Javascript (Simple Examples)

Welcome to a tutorial and examples on how to take screenshots with Javascript. So you have a project that needs to do screenshots? An easy way to capture screenshots in Javascript is to use the html2canvas library:

html2canvas(document.body).then(canvas => < let a = document.createElement("a"); a.download = "ss.png"; a.href = canvas.toDataURL("image/png"); a.click(); >); 

That’s all for the “quick fix”, read on for detailed examples!

TABLE OF CONTENTS

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

EXAMPLE CODE DOWNLOAD

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

JAVASCRIPT SCREENSHOTS

All right, let us now get into the examples of how to take screenshots in Javascript.

TUTORIAL VIDEO

METHOD 1) USING HTML2CANVAS LIBRARY

1A) THE HTML

  
TEST
 Dummy Text - Change and see how it captures below! 

Nothing much here actually. Just load the library and create some dummy elements to work with the screenshot.

1B) THE JAVASCRIPT

• Apart from canvas.toDataURL(«image/png») , we can also set it to («image/jpeg», QUALITY) , or («image/webp», QUALITY) .
• QUALITY is a number from 0 to 1, 0 being the lowest and 1 being the highest.
• a.click() may not always work because of security restrictions. It is best to just append this link on the page, and let users manually click to save the screenshot.

METHOD 2) USING SCREEN CAPTURE API

2A) THE JAVASCRIPT

async function capture () < // (A) GET MEDIA STREAM const stream = await navigator.mediaDevices.getDisplayMedia(< preferCurrentTab: true >); // (B) STREAM TO VIDEO const vid = document.createElement("video"); // (C) VIDEO TO CANVAS vid.addEventListener("loadedmetadata", function () < // (C1) CAPTURE VIDEO FRAME ON CANVAS const canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"); ctx.canvas.width = vid.videoWidth; ctx.canvas.height = vid.videoHeight; ctx.drawImage(vid, 0, 0, vid.videoWidth, vid.videoHeight); // (C2) STOP MEDIA STREAM stream.getVideoTracks()[0].stop(); // (C3) "FORCE DOWNLOAD" let a = document.createElement("a"); a.download = "ss.png"; a.href = canvas.toDataURL("image/png"); a.click(); // MAY NOT ALWAYS WORK! >); // (D) GO! vid.srcObject = stream; vid.play(); >

• (A) This will ask for the user’s permission to share the current tab.
• (B & D) Once we have a stream of the user’s current tab, feed it into a tag.
• (C1) From the , we capture a single frame onto a .
• (C3) Then, “force download as image file” as usual.

2B) A COUPLE OF NOTES

• getDisplayMedia will not work on all browsers at the time of writing – See compatibility checks below.
• preferCurrentTab: true will only work on Chromium-based browsers; If this is not set, the current tab cannot be captured for some reason.
• Although it is possible to specify video: < displaySurface: "window" >to capture the entire window instead.
• Also, it is possible to record videos… Or even send the entire screen capture stream to the server.

EXTRAS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

EXTRA) UPLOAD SCREENSHOT TO SERVER

JAVASCRIPT

// (A) APPEND SCREENSHOT TO DATA OBJECT var data = new FormData(); data.append("screenshot", canvas.toDataURL("image/jpeg", 0.6)); // (B) UPLOAD SCREENSHOT TO SERVER fetch("3b-upload.php", < method:"post", body:data >) .then(res => res.text()) .then(txt => alert(txt));

In both methods above, we can send the captured image to the server instead of forcing a download.

SERVER-SIDE SCRIPT

On the server side, just save the uploaded image. This one is in PHP, but you can pretty much “translate” it to whatever other language you are using.

LINKS & REFERENCES

COMPATIBILITY CHECKS

These examples will work on any modern Grade A browser.

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment Cancel Reply

Search

Breakthrough Javascript

Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

Socials

About Me

W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

Источник

Как сделать скриншот элемента на JavaScript?

Для тех, кто еще не знает, что такое скриншот (screenshot) поясню: это снимок экрана вашего компьютера.

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

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

Где это может вам пригодиться – вы решаете сами, а мне это пригодилось для написания простого модуля оформления заказа, где я смог прикреплять итоговое изображение из конструктора мебели к e-mail-письму.

Для реализации поставленных целей мы будем использовать очень классную библиотеку под названием «html2canvas».

1. Скачайте архив в конце статьи, содержимое разархивируйте и файл библиотеки загрузите к себе на сайт, после чего перед закрывающим тегом подключите его:

Не забывайте проставить корректную ссылку до файла.

2. Далее на нужную страницу, перед закрывающим тегом , вставляем скрипт, который и будет делать скриншот элемента:

Здесь «content» – это идентификатор элемента, который и нужно заскринить, а «my_screen» – это переменная, содержащая наш снимок в формате base64.

Что мы можем сделать с полученными данными? Сохранить и вывести изображение с помощью PHP-скрипта (об этом вы можете почитать в отдельной нашей статье), а можете вставить на страницу в нужное место.

Тогда итоговый вариант скрипта будет таким:

Где «result» – это ID элемента, куда нужно вывести ваше изображение.

Можно ли отключить автоматическое создание скриншота?

Да. Создание скриншота можно привязать к ссылке или кнопке, а как именно, я сейчас покажу.

HTML-код будет выглядеть следующим образом (все элементы вы можете разделить и поместить в нужные участки вашего сайта):

В таком случае скриншот элемента будет создаваться и выводиться только после нажатия на указанную ссылку.

Вот все, что я хотел вам рассказать о данной библиотеке и о том, как сделать скриншот отдельного элемента на вашем сайте. Если что-то вам показалось непонятным – пишите об этом в комментариях.

Источник

Скриншоты без десктопа на HTML5

Практически каждый день я пользуюсь почтой Gmail, но вот недавно заметил, что если сделать скриншот экрана (www.take-a-screenshot.org), то простым нажатием Ctrl + V этот скриншот можно скопировать прямо в текст письма Gmail. Это работает везде, но естественно кроме IE. Заинтересовавшись вопросом как это происходит нагуглил следующий пост на Stackoverflow. Под сильным впечатлением от возможностей HTML5 clipboardData решил сделать простенький портал, где без всяких Desktop приложений любой юзер может загрузить скриншот просто скопировав его.

Поддержка браузерами

Во первых надо отметить, что для того, чтобы что-то скопировать из буфера (например скриншот) в браузере должна быть поддержка Clipboard API. Как можно видеть на caniuse только самые последние браузеры работают с этим API. IE, к сожалению, курит в сторонке не смотря на partial support.

Загрузка скриншотов на javascript

document.body.addEventListener("paste", function(e) < . >); 

Обработчик будет вызываться всегда, когда в рабочей области окна браузера происходит событие «Вставить», например по нажатию Ctrl + V. Далее нужно определить код, который собственно и примет файл изображения из буфера. Этот код идентичен для браузеров Chrome и Opera, но разный для FireFox, так как у последнего по каким-то соображениям безопасности закрыты методы объекта clipboardData.

Chrome, Opera

// e.clipboardData.items - это и есть файлы находящиеся в буфер обмене for (var i = 0; i < e.clipboardData.items.length; i++) < // выбираем только картинки if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") < // Получаем файл как Blob (бинарные данные) var imageFile = e.clipboardData.items[i].getAsFile(); var fileReader = new FileReader(); fileReader.onloadend = function(e) < // Файл прочитан в this.result его Base64 представление loadImg(this.result); >; // Читаем Blob как DataURL (Base64 представление бинарных данных) fileReader.readAsDataURL(imageFile); e.preventDefault(); break; > > 

FireFox

В FireFox у нас нет возможности прочитать файл через clipboardData. При вставке, браузер самостоятельно создает тег с src в виде DataURL. Поэтому придется сделать «костыль»:

// При инициализации js, если браузера Mozilla, то добавляем скрытый, редактируемый (contenteditable) div и // ставим на него фокус. if ($.browser.mozilla) '); $('#temp').focus(); > // Определяем событие "Вставить" document.body.addEventListener("paste", function(e) < if ($.browser.mozilla) < // Если Mozilla, то фокусируем на созданный ранее div // (это нужно для того, чтобы FireFox вставил img в нужном месте) $('#temp').focus(); // Удаляем предыдущий img (вдруг мы копируем 2, 3, . N раз) $('#temp img').remove(); // У FireFox при создании img нет callback-а и единственный способ получить img - использовать небольшую паузу setTimeout(function() < // Вот тут FireFox точно вставил img в temp div, мы можем взять его DataURL и загрузить картинку loadImg($('#temp img').attr('src')); >, 1); return true; > >); 

Куда загрузить картинку?

Загрузить картинку можно сразу на сервер, передавая через POST DataURL или например в canvas как сделано на Your screen:

var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); . function loadImg(dataURL) < var imageObj = new Image(); imageObj.onload = function() < var width = this.width, height = this.height; canvas.width = width; canvas.height = height; ctx.drawImage(this, 0, 0, width, height); >; imageObj.src = dataURL; > 

Canvas удобен тем, что перед загрузкой скриншота на сервер можно его отредактировать: подчеркнуть, нарисовать, обвести, вырезать и т.д.

Что происходит на сервере?

На сервере должен быть POST контроллер, который бы принимал body в формате Base64 (DataURL) и декодировал его в бинарный файл изображения, например png. Контроллер может быть написан на любом языке, например Java с использованием SpringMVC:

@RequestMapping(value = "/upload", method = RequestMethod.POST) public @ResponseBody String save(@RequestBody String b64) < File file = null; FileOutputStream out = null; try < // Создаем Output поток out = new FileOutputStream("/opt/files/somename.png"); // Декодируем Base64 в байты и сохраняем в поток out.write(Base64.decodeBase64(StringUtils.replace(b64, "data:image/png;base64,", ""))); // Закрываем поток IOUtils.closeQuietly(out); >catch (FileNotFoundException e) < e.printStackTrace(); >catch (IOException e) < e.printStackTrace(); >return file.getName(); > 

Для внимательных отмечу, что вот эта конструкция StringUtils.replace(b64, «data:image/png;base64,», «») нужна для нормализации передаваемого из Javascript DataURL. Дело в том, что при создании DataURL вначале ставится его тип и формат и после идет Base64 представление, например data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVYAAAMAC…

Дополнительно можно ещё проверить размер файла, и если он превышает определенный максимум сжать в jpg.

Варианты использования

• prntscr.com — копировать скриншот можно только в Chrome и без редактирования
• snag.gy — уже лучше, но скрншоты загружаются очень медленно и только один раз (первый)
• Больше не нашел.

В скором времени мы планируем перенести весь этот функционал в наш Онлайн консультант Cackle. Таким образом у клиентов будет возможность сделать скриншот и передать изображение прямо через консультанта оператору. Это в некотором смысле лучшая замена Co-Browser, так как позволяет показывать весь экран (а не только браузер), снизить издержки на разработку и минимизировать ошибки.

В заключении скажу, что проект Your screen совсем новый и будет развиваться дальше, поэтому жду вашей критики и пожеланий по функционалу.

Источник