Question

我需要做一个svg export png image function.First我生成svg到base64，但base64 code`type是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);
}`

我的cavans.width / height可能非常大。然后我使用cavans.toDataURL返回"data:;"。当cavans.width / height正常时，可以生成它。有什么好方法可以解决这个问题吗？或者使用java让svg + xml代码生成到.png？

Answer 1

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

他们对出口方法也有限制。在我的Chrome浏览器中，toDataURL返回与 16380 * 16380 宽的画布相同的data:;，我的Firefox会在{<1}}左右strong> 11150 * 11150 。其他浏览器可能具有不同的值，具体取决于它们自己的实现。

所以，如果你真的想通过画布，你必须将画布的大小限制在这些最大区域。

现在，如果你可以进行转换服务器端，你可以使用它。 Batik已知是一个很好的SVG UA，并且应该能够正确转换SVG，除非在SVG的NS_ERROR_FAILURE元素内部还有HTML呈现。

在这种情况下，像 phantomjs 这样的无头浏览器，允许拍摄渲染页面的真实截图似乎是最好的方法。

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

Answer 2

<!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 canvas scale（）方法

您可以使用此方法，也许可以使用

返回“数据：”网址可能太大

canvas.toDataUrl返回“data：;”当cavans.width / height太大

2 个答案: