使用 <canvas> 将非常大的 SVG 转换为 PNG

Question

我正在尝试将大型 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');

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

进一步编辑

我现在相当确信这是画布未能绘制整个图像，因为我尝试实施 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   

图像再次加载正常，转到 URL（在它被撤销之前）也能正常显示图像。

canvas dataURL 的长度不一致，所以我不认为这是最大化，有没有办法检测canvas 大小？该应用程序仅支持 Chrome 和 FireFox。

Answer 1

Working fiddle.

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 的 1/4？

答案：

请遵守以下规则：

1. x 的 <rect/> + width 的 <rect/> width 的 <svg/>
2. 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>

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

所以，10+550>500

在这种情况下，图像将被部分渲染。

希望这能解决您的问题。