canvas.toDataUrl返回“ data :;” 当canvas.width / height太大时

Question

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

Answer 1

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

它们对导出方法也有限制。在我的Chrome浏览器中，toDataURL返回的结果与宽度data:;大约为 16380 * 16380的
画布的返回值相同，而我的Firefox的返回值NS_ERROR_FAILURE大约为 11150 * 11150
。其他浏览器可能根据自己的实现而具有不同的值。

因此，如果您真的想通过画布，则必须将画布的大小限制为这些最大区域。

现在，如果您可以在服务器端进行转换，则可以使用它。蜡染被称为是很好的SVG
UA，并且应该能够正确转换SVG，除非在SVG <foreignObject>元素内还可以渲染HTML 。

在这种情况下，最好的方法是使用像 phantomjs 这样的无头浏览器来截取渲染页面的真实屏幕截图。

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