我需要做一个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?
答案 0 :(得分: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图像合并到服务器端或通过字节操作(可能需要一些额外的工作)。
答案 1 :(得分:-1)
<!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()方法
您可以使用此方法,也许可以使用
返回“数据:”网址可能太大