首页 文章

将节点元素转换为图像

提问于
浏览 次
0

我正在寻找能够帮助我将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元素丰富）转换为图像？

javascript html svg canvas html2canvas

1 回答

  • 2

    这似乎是由canvg作者严重不良测试和记录的结果 . 抛出错误的行是作为pull request的一部分引入的，据说这增加了对在节点环境中执行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 ，其内容依赖于一个永远不会被声明为canvg依赖的模块canvas . （这不是轻量级的，它是完整的 <canvas> 实现 . ）

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

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

    从那里，用你的代码调用 canvg

    import Image from 'canvas';

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

    应该让你跑步 .

    回复于

相关问题