使用<canvas>将非常大的SVG转换为PNG
我试图通过将一个大的SVG（它的数据URL大约是750000 - 1000000个字符）转换为PNG，方法是将其数据url传递到一个图像并放入一个画布中，但该图像仅加载大约四分之一的SVG。
创建通过：
var svg_xml = (new XMLSerializer()).serializeToString(svg),
url = 'data:image/svg+xml;base64,' + btoa(svg_xml);
var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
var canvas = document.create('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 730, 300);
callbackFn(canvas.toDataURL('image/png');
}
img.src = url
编辑
我尝试过实现canvg来绘制SVG，但DataURL在空白图像中产生了结果：
var svg_xml = (new XMLSerializer()).serializeToString(svg);
var canvas = document.createElement('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawSvg(svg_xml, 0, 0, 730, 300);
callbackFn(canvas.toDataURL('image/png');
我用过的方法有什么问题吗？
进一步编辑
我现在相当相信，这是画布无法绘制整个图像，因为我试图实现Blob解决方案以达到相同的效果：
var svg_xml = (new XMLSerializer()).serializeToString(svg),
blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}),
url = window.URL.createObjectURL(blob);
var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
var canvas = document.create('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 730, 300);
window.URL.revokeObjectURL(url);
callbackFn(canvas.toDataURL('image/png');
}
img.src = url
图片再次加载正常并转到网址（在撤消之前），也会很好地显示图片。
画布dataURL的长度不一致，所以我不认为这是最大的，是否有检测画布大小的方法？ 该应用程序仅支持Chrome和FireFox。
工作小提琴。
HTML：
<div>
<svg xmlns="http://www.w3.org/2000/svg"
width="526" height="233">
<rect x="13" y="14" width="500" height="200" rx="50" ry="100"
fill="none" stroke="blue" stroke-width="10" />
</svg>
<a id='imgId'>Save</a>
</div>
<canvas></canvas>
JavaScript的：
var svg = document.getElementsByTagName('svg')[0];
var svg_xml = (new XMLSerializer()).serializeToString(svg),
blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}),
url = window.URL.createObjectURL(blob);
var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 730, 300);
window.URL.revokeObjectURL(url);
var canvasdata = canvas.toDataURL('image/png');
var a = document.getElementById('imgId');
a.download = "export_" + Date.now() + ".png";
a.href=canvasdata;
}
img.src = url
你的问题：
为什么图像只加载大约四分之一的SVG？
回答：
只需遵循以下规则：
x的<rect/> + width的<rect/> <= width的<svg/> y的<rect/> + height的<rect/> <= height的<svg/> 例如：
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200">
<rect x="10" y="10" width="550" height="250" rx="50" ry="100"
fill="none" stroke="blue" stroke-width="10" />
</svg>
在这里， x的<rect/> = 10 ，的宽度<rect/> = 550 ，的宽度<svg> = 500
所以， 10 + 550 > 500
在这种情况下，图像将被部分渲染。
希望这会解决你的问题。
链接地址: http://www.djcxy.com/p/50325.html