domtoimage — конвертировать html в изображение

внешний интерфейс JavaScript SVG WebGL

html в изображение

предисловие

В течение этого периода работы я работал над классом холста H5.Ключевой частью процесса разработки является преобразование узлов dom в изображения. Сначала я использовал для этого html2canvas.После того, как я его доделал, я почувствовал, что эффект четкости картинки не очень хороший.Потом я нашел js-плагин domtoimage на GitHub и заменил предыдущий html2canvas. После замены не только улучшилась четкость, но и стало возможным поддерживать больше форматов изображений и стилей узлов dom, чем html2canvas.

Лаконичный образ дома

Основной код domtoimage составляет всего более 700 строк, а методов и атрибутов относительно немного, после скачивания вы будете знать, как им пользоваться и некоторыми функциями. Хотя код html2canvas составляет более 3000 строк, вызвать его несложно, но условно говоря, код действительно гораздо больше, чем domtoimage.

Основными методами domtoimage являются:

domtoimage.toPng(...); Преобразовать узел в картинку в формате png


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);
    });

domtoimage.toJpeg(...); Преобразовать узел в картинку в формате jpg

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });

domtoimage.toSvg(...); Преобразуйте узел в изображение в формате svg, а формат сгенерированного изображения — в формате base64.

function filter (node) {
    return (node.tagName !== 'i');
}

domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
    .then(function (dataUrl) {
        /* do something */
    });

domtoimage.toBlob(...); Преобразование узла в двоичный формат, это может напрямую загрузить изображение, это очень удобно?

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

domtoimage.toPixelData(...); Получите исходное значение пикселя и верните его в виде массива Uint8Array, каждые 4 элемента массива представляют пиксель, то есть значение rgba. Этот метод также довольно практичен и может использоваться для написания цветов шейдера в WebGL.

var node = document.getElementById('my-node');

domtoimage.toPixelData(node)
    .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 is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
          }
        }
    });

Основные свойства domtoimage:

filter: ненужные узлы по умолчанию в узлах фильтра;

bgcolor : цвет фона изображения;

высота, ширина: ширина и высота изображения;

style : стиль входящего узла, который может быть любым допустимым стилем;

качество : качество изображения, то есть четкость;

cacheBust : добавьте метку времени к URL-адресу изображения, что эквивалентно добавлению нового изображения;

imagePlaceholder : при сбое создания изображения подсказка на изображении эквивалентна alt тега img;

Эти выше взяты из GitHub

сравнение domtoimage и html2canvas

Совместимость с большим количеством стилей и этикеток

В H5, который я сделал, узлы не только содержат градиенты, фильтры, тени и другие сложные для визуализации стили, но также содержат различные теги svg, а сам svg имеет такие атрибуты, как обводка и заливка.

image

dome

Оба вызываются напрямую без какой-либо обработки.При сравнении видно, что domtoimage лучше совместим с фильтрами, тенями (box-shadow) и другими стилями, чем html2canvas, и может лучше поддерживать svg.

В результате картина становится более четкой

Также используйте простейший метод для вызова двух методов для генерации изображений.Видно, что изображения, сгенерированные domtoimage, явно намного четче, чем html2canvas

image

Немного увеличив масштаб, вы можете четко увидеть разницу

image

dome

domtoimage недостаточно

Не все стили domtoimage совместимы Пока несовместимыми свойствами, которые я обнаружил, являются графическая маска mask-box-image и svg shadow drop-shadow. Из-за нужды проекта с совместимостью графической маски я разобрался сам, а svg shadow drop-shadow действительно сложно, поэтому ставлю временно. Код совместимости для графических масок находится во втором куполе ниже. Здесь нечего сказать

купол, напрямую использующий domtoimage, не может нормально сохранять изображения

Живое изображение после постобработки купола

Суммировать

Производительность domtoimage по-прежнему очень высока, лучше, чем у html2canvas, с меньшим количеством кода, высокой производительностью и простым приложением.

Если есть другие полезные плагины или если написать не туда, пожалуйста, оставьте сообщение и дайте мне знать, спасибо!

Категории