java base64 svg转png_javascript – 使用非常大的SVG转换为PNG

Working fiddle.

HTML：

width="526" height="233">

fill="none" stroke="blue" stroke-width="10" />

Save

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

你的问题：

为什么图像只加载大约1/4的SVG？

回答：

只要按照这些规则：

< rect />的x < rect />的宽度< =< svg />的宽度

> y< rect /> < rect />的高度< =< svg />的高度

例如：

fill="none" stroke="blue" stroke-width="10" />

这里,< rect /> = 10,< rect />的宽度= 550,宽度< svg> = 500

因此,10 550> 500

在这种情况下,图像将被部分渲染.

希望这将解决你的问题.