javascript - Canvas 另存为图像 [canvg - 在 Canvas 上渲染 svg]

Question

我正在尝试将 Canvas 从网页保存到文件中。 Canvas 非常复杂，是由多个图像(几个半透明的 .png 文件、2 个 svg 元素和 4 个其他 Canvas )构建的，无论我如何尝试保存它，都使用 canvas.toDataURL()方法或使用 domtoimage [library] ( https://github.com/tsayen/dom-to-image ) 或 canvas2image 或 fileSaver 或 canvasToBLob 库 - 结果是相同的:没有 svg(和 <image> 内部元素)部分的图像。所以我只得到用 Canvas 制成的零件。我读到过有关“受污染” Canvas 的信息，但图像主机服务器与网页相同。

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

整个代码比较庞大，保存选项也不同，所以我这里只放一个保存选项:

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

左图是使用浏览器图片另存为功能时得到的图片，右图是js通过toBlob保存的图片

将很高兴获得有关如何自动保存完整图像的任何建议:)

Answer 1

我将利用您编辑的机会将其作为真正的答案发布，因为您的答案(顺便说一句，您应该将其作为 self 答案发布)基于我要求您提供更多说明的评论。

因此，正如我们发现的，您的问题是，当您调用导出方法时，所有图像均未加载/绘制，因此，这些图像在输出中丢失。

canvg函数及其快捷方式 ctx.drawSvg ，可以是异步的。通常，当仅渲染形状时，情况并非如此，但由于在这里您加载的是包含在 SVGImage ( <image> ) 元素中的外部内容，因此它无法同步。

但是，有一个renderCallback您可以添加到 canvg 调用中的选项。因为您确实使用了 ctx.drawSVG ，并且与原始 canvg 相比，此方法有一些额外的参数(dx、dy、dwidth、dheight) ，你需要这样调用它:

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

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

<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>