Как захватить изображение из элемента DOM с помощью JavaScript

Хотя если вам не нужна такая функция в одном из ваших проектов, вы найдете эту функцию действительно интересной. Эта библиотека, как ее имя описывает, будет генерировать изображение или SVG из узла документа в формате Base64. Ага, каждый тег HTML, все, что вы хотите, может быть преобразовано в изображение с помощью JavaScript без создания внешних вызовов на любой сервер или что-либо в любом современном браузере.

Требования

Чтобы выполнить эту задачу, мы будем зависеть от библиотеки Javascript типа «дом-к-изображению». Дом-на-изображение библиотека, которая может превратить произвольный узел DOM в векторное (SVG) или растровое (PNG или JPEG) изображение, написанное на JavaScript. Он основан на domvas Пола Бакауса и был полностью переписан, исправлены некоторые ошибки и добавлены некоторые новые функции (например, поддержка веб-шрифтов и изображений).

Вы можете получить скрипт либо используя NPM:

npm install dom-to-image

Или просто загрузите .zip файл (или перемещаться) в официальный репозиторий Github.

Как это устроено

Эта библиотека использует функцию SVG, которая позволяет иметь произвольный HTML-контент внутри тег. Итак, чтобы отобразить этот DOM-узел для вас, предпринимаются следующие шаги:

  1. Клонировать исходный узел DOM рекурсивно.

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

  3. Вставить веб-шрифты:

    • найти все @font-face объявления, которые могут представлять веб-шрифты

    • разбирать URL файлов, скачивать соответствующие файлы

    • Base64-кодировать и встроенный контент как data: URL-адрес

    • объединить все обработанные правила CSS и объединить их элемент, а затем прикрепить его к клону

  4. Вставить изображения:

    • вставлять URL изображения в элементы

    • встроенные изображения, используемые в background Свойство CSS, похожее на шрифты

  5. Сериализировать клонированный узел в XML.

  6. Оберните XML в тег, затем в SVG, а затем сделать его URL-адрес данных.

  7. При желании, чтобы получить содержимое в формате PNG или необработанные данные пикселей в виде Uint8Array, создайте элемент Image с SVG в качестве источника и визуализируйте его на внеэкранном холсте, который вы также создали, затем прочитайте содержимое с холста.

Реализация

Все функции верхнего уровня принимают узел DOM и параметры рендеринга и возвращают обещания, которые выполняются с соответствующими URL-адресами данных.

Элемент в PNG

Чтобы создать изображение в формате PNG, используйте domtoimage.toPng метод:


Some HTML content or images.

var node = document.getElementById('my-node'); domtoimage.toPng(node).then(function (dataUrl) { var img = new Image(); img.src = dataUrl; document.body.appendChild(img); }).catch(function (error) { console.error('oops, something went wrong!', error); });

Элемент в JPEG

Чтобы создать изображение в формате JPEG, используйте domtoimage.toJpeg метод:


Some HTML content or images.

var node = document.getElementById('my-node'); var options = { quality: 0.95 }; domtoimage.toJpeg(node, options).then(function (dataUrl) { // Do something with the dataURL (data:image/jpeg;base64,i........) });

Элемент для Blob

Если вам нужно получить Blob вместо строки Base64, вы можете использовать domtoimage.toBlob метод, который возвращает BLOB-объект в PNG из визуализированного DOM:


Some HTML content or images.

var node = document.getElementById('my-node'); domtoimage.toBlob(node).then(function (blob) { window.saveAs(blob, 'my-node.png'); });

В предыдущем примере мы используем FileSaver Плагин, который позволяет загружать файл (из BLOB-объекта) в браузер с помощью Javascript.

Живой пример

Попробуйте и поиграйте со следующей скрипкой, изображение base64 будет добавляться к документу каждый раз, когда вы нажимаете кнопку «Создать». Измените содержимое текстовой области, чтобы увидеть результат:

Он протестирован на последних версиях Chrome и Firefox (49 и 45 соответственно на момент написания), причем Chrome значительно лучше работает на больших деревьях DOM, возможно, благодаря более эффективной поддержке SVG и тому факту, что он поддерживает CSSStyleDeclaration.cssText имущество. Internet Explorer не поддерживается (и не будет), так как не поддерживает SVG тег.

Повеселись !

Ссылка на основную публикацию
Adblock
detector