小编mat*_*189的帖子

我试图将一个大的SVG(它的数据URL大约是750000 - 1000000个字符)转换为PNG,方法是将它的数据url传递到一个图像并进入画布,但图像只加载大约1/4的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');

我使用过的方法有什么问题吗？ …