Конвертировать элементы узла в изображение - PullRequest
Новая
       20

Конвертировать элементы узла в изображение

0 голосов
/ 15 мая 2018

Я ищу библиотеку или фрагмент кода, который поможет мне преобразовать элемент узла HTML DOM в файл image / png.

Я пытался использовать библиотеку html2canvas , но она не отображает svg узлов, и в моем текущем проекте у меня их много. Также я попытался использовать библиотеку canvg для преобразования всех элементов SVG на странице в элементы Canvas, но canvg всегда выдавал ошибку на этапе рендеринга:

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'ImageClass' из не определен

Фрагмент кода, который используется для преобразования SVG в Canvas: 

export const svgToCanvas = () => {
  const print = document.getElementsByClassName('print-page')[0]
  const svgElements = print.getElementsByTagName('svg')
  _.each(svgElements, e => {
    let xml
    const canvas = document.createElement('canvas')
    canvas.className = 'screenShotTempCanvas'
    xml = (new window.XMLSerializer()).serializeToString(e)
    xml = xml.replace(/xmlns=http:\/\/www\.w3\.org\/2000\/svg/, '')
    canvg(canvas, xml)
    e.parentNode.insertBefore(canvas, e.nextSibling)
    e.classList.add('tempHide')
    e.style.display = 'none'
  })

  const temps = document.getElementsByClassName('.screenShotTempCanvas')
  _.each(temps, e => {
    e.remove()
  })
  const svgs = document.getElementsByClassName('tempHide')
  _.each(svgs, e => {
    if (e) {
      e.style.display = 'block'
      e.classList.remove('tempHide')
    }
  })
}

Ошибка выдает эту строку в коде canvg: 

if (nodeEnv) {
    if (!s || s === '') {
        return;
    }
    ImageClass = opts['ImageClass'];  //<= error throws here
    CanvasClass = target.constructor;
    svg.loadXml(target.getContext('2d'), s);
    return;
}

Я также пытался преобразовать узел в формат PDF с использованием библиотек jsPDF и html-pdf , но в этом случае все стили исчезли из узла, и мне нужно, чтобы их не было потерял.

Может ли кто-нибудь дать мне соответствующий подход к преобразованию узла HTML DOM (который богат SVG-элементами) в изображение?

1 Ответ

0 голосов
/ 15 мая 2018

Это, похоже, результат серьезного плохого тестирования и документирования авторами canvg. Строка, в которую выдается ошибка, была введена как часть запроса на извлечение , который предположительно добавил поддержку для выполнения canvg в среде узла. Но похоже, что он был протестирован на работу, только если он использовался в качестве зависимости в node-svg2img .

Если вы посмотрите на этот источник, вы найдете следующее (отрывок): 

var canvg = require('canvg'),
    Canvas = require('canvas');

function convert(svgContent) {
    var canvas = new Canvas();
    canvg(canvas, svgContent, { ignoreMouse: true, ignoreAnimation: true, ImageClass: Canvas.Image });
    return canvas;
}

Как видите, canvg вызывается с опцией ImageClass, которая никогда не документировалась и чье содержимое зависит от модуля canvas , который никогда не указывается в качестве зависимости для canvg. (И это не легкий, это полная реализация <canvas>.)

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

Кажется, успешный вызов document.createElement('canvas') не означает, что у вас установлен модуль canvas. Эта заметка в документе JSDOM говорит вам, что нужно сделать.

Оттуда, набрав canvg в вашем коде с 

import Image from 'canvas';

canvg(canvas, xml, {ImageClass: Image});

побежит.

...