我正在尝试将 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保存的图片
将很高兴获得有关如何自动保存完整图像的任何建议:)
最佳答案
我将利用您编辑的机会将其作为真正的答案发布,因为您的答案(顺便说一句,您应该将其作为 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>
关于javascript - Canvas 另存为图像 [canvg - 在 Canvas 上渲染 svg],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41092802/