使用非常大的SVG轉換為PNG <canvas>

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（在它被撤銷之前）也顯示圖像正常。

畫布dataURL的長度不一致，所以我不認為這是最大限度的，有沒有辦法檢測畫布大小？ 該應用程序僅支持Chrome和FireFox。

Answer 1

工作小提琴。

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

你的問題：

為什么圖像只加載大約1/4的SVG？

回答：

只需遵循以下規則：

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>

這里， x <rect/> = 10 ，寬度<rect/> = 550 ，寬度<svg> = 500

所以， 10 + 550 > 500

在這種情況下，將部分渲染圖像。

希望這能解決你的問題。