Question

我正在寻找能够帮助我将HTML DOM节点元素转换为image / png文件的库或代码片段。

我尝试使用html2canvas库但它不会渲染svg个节点，而在我当前的项目中，我有很多它们。此外，我尝试使用canvg库将页面上的所有SVG元素转换为Canvas元素，但是canvg总是在渲染步骤上引发错误：

Uncaught（in promise）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;
}

我还尝试使用jsPDF和html-pdf库将节点转换为PDF格式，但在这种情况下，所有样式都从节点中消失，我不需要丢失它们。

有人能为我提供合适的方法，如何将HTML DOM节点（SVG元素丰富）转换为图像？

Answer 1

这似乎是由canvg作者严重不良测试和记录的结果。抛出错误的行是作为pull request的一部分引入的，该node-svg2img据称增加了对在节点环境中执行canvg的支持。但是，如果它被用作canvas中的依赖项，它似乎只能被测试。

如果您查看该来源，您会发现以下内容（摘录）：

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，其内容依赖于永远不会被声明为依赖项的模块This note。 canvg。（这不是一个轻量级的，它是完整的<canvas>实现。）

现在你从未说过你在节点中做了这一切，但我会假设你这样做，否则我不明白为什么导致错误的行被调用了。

似乎成功调用document.createElement('canvas')并不表示您已安装canvas模块。 jsdom doc中的{{3}}告诉你需要做什么。

从那里，使用

在代码中调用canvg

import Image from 'canvas';

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

应该让你跑步。

将节点元素转换为图像

1 个答案: