Загрузка htmltoimage - Загрузка исходного кода htmltoimage

htmltoimage

Другой исходный код

rc-0.1

Скачать

преобразование HTML в изображение

Генерирует изображение из узла DOM, используя холст HTML5 и SVG.
Форк от dom-to-image с более удобным в обслуживании кодом и некоторыми новыми функциями.

Установить

 npm install --save html-to-image

Использование

 /* ES6 */import * as htmlToImage из 'html-to-image';import { toPng, toJpeg, toBlob, toPixelData, toSvg } из 'html-to-image';/* ES5 */var htmlToImage = require(' HTML-изображение');

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

toSVG
toPng
toJpeg
toBlob
toPixelData

Воспользуйтесь следующими примерами.

Получите URL-адрес данных изображения PNG в формате Base64 и сразу же отобразите его:

 var node = document.getElementById('my-node');htmlToImage.toPng(узел)
  .then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);
  })
  .catch(function (error) {console.error('ой, что-то пошло не так!', error);
  });

Получите URL-адрес данных изображения PNG в формате Base64 и загрузите его (с помощью загрузки):

 htmlToImage.toPng(document.getElementById('мой-узел'))
  .then(function (dataUrl) {download(dataUrl, 'my-node.png');
  });

Получите изображение в формате PNG и загрузите его (с помощью FileSaver):

 htmlToImage.toBlob(document.getElementById('мой-узел'))
  .then(function (blob) {window.saveAs(blob, 'my-node.png');
  });

Сохраните и загрузите сжатое изображение JPEG:

 htmlToImage.toJpeg(document.getElementById('мой-узел'), {качество: 0,95})
  .then(function (dataUrl) {var link = document.createElement('a');link.download = 'my-image-name.jpeg';link.href = dataUrl;link.click();
  });

Получите URL-адрес данных SVG, но отфильтруйте все элементы <i> :

 функция фильтра (узел) {
  return (node.tagName!== 'i');}htmlToImage.toSvg(document.getElementById('my-node'), {filter: filter })
  .then(function (dataUrl) {/* сделайте что-нибудь */
  });

Получите необработанные данные пикселей в виде Uint8Array, где каждые 4 элемента массива представляют данные RGBA пикселя:

 var node = document.getElementById('my-node');htmlToImage.toPixelData(узел)
  .then(function (pixels) {for (var y = 0; y < node.scrollHeight; ++y) { for (var x = 0; x < node.scrollWidth; ++x) {pixelAtXYOffset = (4 * y) * node.scrollHeight) + (4 * x);/* PixelAtXY — это Uint8Array[4], содержащий значения RGBA пикселя в точке (x, y) в диапазоне 0..255 */pixelAtXY = Pixels.slice(pixelAtXYOffset, PixelAtXYOffset + 4);
  });

Получите HTMLCanvasElement и сразу отобразите его:

 htmlToImage.toCanvas(document.getElementById('мой-узел'))
  .then(function (canvas) {document.body.appendChild(canvas);
  });

Параметры

фильтр

Функция, принимающая узел DOM в качестве аргумента. Должен возвращать true, если переданный узел должен быть включен в выходные данные. Исключение узла означает также исключение его дочерних элементов.

Не вызывается на корневом узле.

фонЦвет

Строковое значение цвета фона, любое допустимое значение цвета CSS.

ширина, высота

Ширина и высота в пикселях, которые будут применены к узлу перед рендерингом.

стиль

Объект, свойства которого необходимо скопировать в стиль узла перед отрисовкой. Возможно, вы захотите проверить эту ссылку на наличие имен JavaScript для свойств CSS.

качество

Число от 0 до 1 указывающее качество изображения (например, 0.92 => 92% ) изображения JPEG.

По умолчанию 1.0 ( 100% )

кэшБюст

Установите значение true, чтобы добавить текущее время в виде строки запроса к URL-запросам для включения очистки кеша.

По умолчанию false

imageЗаполнитель

URL-адрес данных для изображения-заполнителя, который будет использоваться в случае сбоя получения изображения.

По умолчанию используется пустая строка, и для неудачных изображений будут отображаться пустые области.

Браузеры

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

Internet Explorer не поддерживается (и не будет поддерживаться), поскольку не поддерживает тег SVG <foreignObject> .

Safari не поддерживается, поскольку в теге <foreignObject> используется более строгая модель безопасности. Предлагаемый обходной путь — использовать toSvg и выполнить рендеринг на сервере.

Зависимости

Источник

В настоящее время используется только стандартная библиотека, но убедитесь, что ваш браузер поддерживает:

Обещать
Тег SVG <foreignObject>

Как это работает

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

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

Рекурсивно клонировать исходный узел DOM
Вычислите стиль узла и каждого подузла и скопируйте его в соответствующий клон.

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

Встраивание веб-шрифтов

найдите все объявления @font-face , которые могут представлять веб-шрифты
проанализировать URL-адреса файлов, загрузить соответствующие файлы
кодировка base64 и встроенный контент в виде URL-адресов данных
объединить все обработанные правила CSS и поместить их в один элемент <style> , а затем прикрепить его к клону

Вставлять изображения

вставлять URL-адреса изображений в элементы <img>
встроенные изображения, используемые в background свойстве CSS, аналогично шрифтам.

Сериализуйте клонированный узел в XML
Оберните XML в тег <foreignObject> , затем в SVG, а затем сделайте его URL-адресом данных.
При желании, чтобы получить содержимое PNG или необработанные пиксельные данные в виде Uint8Array, создайте элемент Image с SVG в качестве источника и отобразите его на закадровом холсте, который вы также создали, а затем прочитайте содержимое с холста.
Сделанный!

На что следует обратить внимание

Если узел DOM, который вы хотите отобразить, включает элемент <canvas> с чем-то нарисованным на нем, с ним следует обращаться нормально, если только холст не испорчен — в этом случае рендеринг скорее всего не удастся.
Рендеринг не будет выполнен в огромном DOM из-за изменения ограничения dataURI.