1

我正在尝试将画布从网页保存到文件中。画布非常复杂，由几个图像（几个半透明的 .png 文件、2 个 svg 元素和 4 个其他画布）构建而成，无论我如何尝试保存它，使用canvas.toDataURL()方法或使用domtoimage [库] （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');
  });

左边的图片是我在浏览器中使用‘ save image as ’功能得到的，右边是js通过toBlob保存的图片

在此处输入图像描述在此处输入图像描述

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

4

1 回答 1

1

我将利用您编辑的机会将其发布为真正的答案，因为您的答案（顺便说一句，您应该作为自我答案发布）基于地雷的评论，要求您进行更多澄清。

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

该canvg函数及其快捷方式ctx.drawSvg可以是异步的。通常，当只渲染形状时，它不会被渲染，但由于您正在加载外部内容，包装在 SVGImage ( <image>) 元素中，所以它不能同步。

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

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>

于 2016-12-17T11:36:24.800 回答