画布另存为图像[canvg - 在画布上渲染svg]

Question

我正在尝试将画布从网页保存到文件中。 画布非常复杂，并且是使用canvas.toDataURL()方法或几个图像（几个半透明的.png文件，两个svg元素和另外四个画布）构建的，无论我如何保存它。使用 domtoimage [library]（https://github.com/tsayen/dom-to-image）或 canvas2image 或 fileSaver 或 canvasToBLob 库 - 结果是相同的：没有svg（和<image>元素内部）部分的图像。所以我只得到了用帆布制作的部件。我读到了“污点”的画布，但图片主机服务器与网页相同。

此外我很困惑，因为如果我通过单击RCM并选择“将图像另存为”功能来保存画布 - 它会完全保存我需要的内容 - 完整图片。

整个代码很大，保存选项也不同，所以我只在这里提出一个保存选项：

domtoimage.toBlob(canvasElement)
  .then(function (blob) {
    console.log(blob);
    window.saveAs(blob, 'my-node.png');
  });

左边的图片是在浏览器中使用“保存图片为”功能时的图片，右边是js通过 toBlob 保存的图片

很乐意获得有关如何自动保存完整图片的任何建议：）

Answer 1

我会利用你的编辑机会发布这个作为一个真正的答案，因为你的基础（你应该把它作为一个自我回答btw）发布在矿山的评论上，要求你进一步澄清。

因此，正如我们发现的那样，您的问题是当您调用导出方法时，所有图像都没有被加载/绘制，因此，输出中缺少这些图像。

canvg功能及其快捷键ctx.drawSvg，可以是异步的。通常情况下，当只渲染形状时，它不是，但是因为在这里你加载外部内容，包装在SVGImage（<image>）元素中，它不能同步。

但是，有一个renderCallback选项可以添加到您的canvg调用中。由于您使用ctx.drawSVG，并且此方法与原始canvg相比具有一些额外参数（dx，dy，dwidth，dheight），因此您需要像这样调用它：

ctx.drawSvg(yourSVGMarkup, 0, 0, null, null, {renderCallback: yourCallbackFunction}); 

＆＃13;

＆＃13;

var str = new XMLSerializer().serializeToString(document.querySelector('svg'));
canvas.getContext('2d').drawSvg(str, 0, 0, null, null, {
  renderCallback: function() {
    console.log('done');
  }
});
console.log('doing');

＆＃13;

<script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.js"></script>
<svg width="300" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" x="0" y="0" height="100" width="100" />
</svg>
<canvas id="canvas"></canvas>

＆＃13;

＆＃13;

＆＃13;