javascript - 当canvas.width/height太大时canvas.toDataUrl返回 "data:;"

Question

我需要做一个 svg 导出 png 图像的功能。 首先，我生成 svg 到 base64，base64 header 类型也是 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？

Answer 1

Canvas 元素的最大尺寸在不同的浏览器实现中会有所不同。 您可以在 this Q/A 中找到这些最大尺寸的详细列表。 。

它们对导出方法也有限制。 在我的 Chrome 中，toDataURL返回相同的 data:;正如您所获得的 Canvas 宽度约为 16380 * 16380 一样，我的 Firefox 确实抛出了 NS_ERROR_FAILURE大约11150 * 11150。 其他浏览器可能有不同的值，具体取决于它们自己的实现。

因此，如果您确实想穿过 Canvas ，则必须将 Canvas 的大小限制在这些最大区域内。

现在，如果您可以在服务器端进行转换，那么您就可以使用它。 Batik众所周知，它是一个很好的 SVG UA，并且应该能够正确转换您的 SVG，除非 SVG 中还有要渲染的 HTML <foreignObject>元素。

在这种情况下，像phantomjs这样的 headless 浏览器，允许对渲染的页面进行真实的屏幕截图似乎是最好的方法。

另一种方法是将大型 SVG 绘制到较小的 Canvas 上，并在服务器端或通过字节操作合并生成的 PNG 图像(可能需要一些额外的工作)。