Содержание
Хотя если вам не нужна такая функция в одном из ваших проектов, вы найдете эту функцию действительно интересной. Эта библиотека, как ее имя описывает, будет генерировать изображение или SVG из узла документа в формате Base64. Ага, каждый тег HTML, все, что вы хотите, может быть преобразовано в изображение с помощью JavaScript без создания внешних вызовов на любой сервер или что-либо в любом современном браузере.
Требования
Чтобы выполнить эту задачу, мы будем зависеть от библиотеки Javascript типа «дом-к-изображению». Дом-на-изображение библиотека, которая может превратить произвольный узел DOM в векторное (SVG) или растровое (PNG или JPEG) изображение, написанное на JavaScript. Он основан на domvas Пола Бакауса и был полностью переписан, исправлены некоторые ошибки и добавлены некоторые новые функции (например, поддержка веб-шрифтов и изображений).
Вы можете получить скрипт либо используя NPM:
npm install dom-to-image
Или просто загрузите .zip
файл (или перемещаться) в официальный репозиторий Github.
Как это устроено
Эта библиотека использует функцию SVG, которая позволяет иметь произвольный HTML-контент внутри тег. Итак, чтобы отобразить этот DOM-узел для вас, предпринимаются следующие шаги:
Клонировать исходный узел DOM рекурсивно.
Вычислите стиль для узла и каждого подузла и скопируйте его в соответствующий клон, и не забудьте воссоздать псевдоэлементы, так как они не клонируются никоим образом.
Вставить веб-шрифты:
найти все
@font-face
объявления, которые могут представлять веб-шрифтыразбирать URL файлов, скачивать соответствующие файлы
Base64-кодировать и встроенный контент как
data:
URL-адресобъединить все обработанные правила CSS и объединить их
элемент, а затем прикрепить его к клону
Вставить изображения:
вставлять URL изображения в
элементы
встроенные изображения, используемые в
background
Свойство CSS, похожее на шрифты
Сериализировать клонированный узел в XML.
Оберните XML в
тег, затем в SVG, а затем сделать его URL-адрес данных.
При желании, чтобы получить содержимое в формате 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 тег.
Повеселись !