当Canvas.宽度/高度过大时，canvas.toDataUrl返回“data：”
我需要做一个svg导出png图像功能。首先，我将svg生成到base64，base64头类型也是svg+xml，然后
var image=new Image();
image.src=base64Code;
image.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.width;
context.drawImage(image, 0, 0);
png = canvas.toDataURL("image/png",1);
}`我的canvas.width/height可能非常大。
当我使用canvas.toDataURL时，它返回"data:;"。当canvas.width/height更合理时，结果是正确的。
有什么好办法来解决这个问题吗？还是使用javascript将svg+xml转换为.png？
回答 2
Stack Overflow用户
发布于 2017-05-09 13:20:24
Canvas元素的最大大小将因浏览器实现而不同。您可以在本问答中找到这些最大维度的良好列表。
它们对出口方法也有限制。在我的Chrome中，toDataURL返回的data:;与16380 * 16380 wide的画布相同，而我的火狐在11150 * 11150附近也有一个NS_ERROR_FAILURE。其他浏览器可能有不同的值，这取决于它们自己的实现。
因此，如果您真的想通过画布，您将不得不限制您的画布的最大面积。
现在，如果您可以在服务器端进行转换，则可以使用它。众所周知，蜡染是一个很好的SVGs，并且应该能够正确地转换您的SVG，除非在SVG的<foreignObject>元素中也有HTML可以呈现。
在这种情况下，像幻影be 这样的无头浏览器，允许真实截图呈现的页面似乎是最好的方法。
另一种方法是将您的大型SVG绘制到较小的画布上，并将生成的PNG映像合并为服务器端或字节操作(可能需要一些额外的工作)。
Stack Overflow用户
发布于 2020-04-10 08:36:19
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
</script>
</body>
</html>
HTML画布比例尺()方法
你可以用这个方法，也许它能用。
返回数据：；可能url太大了
https://stackoverflow.com/questions/43860035
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号