無法使用canvg將svg轉換為png

Question

我正在嘗試使用canvg將svg轉換為canvas並將轉換后的canvas作為png保存在我的計算機上。 這是我正在使用的代碼 -

function downloadImage()
{
    saveImage('chart1');
    saveImage('chart2');
    saveImage('chart3');
    saveImage('chart4');
    saveImage('chart5');
    saveImage('chart6');
    saveImage('chart7');
    saveImage('chart8');
}

function saveImage(chartId)
{
    var $container = $('#'+chartId),
    content = $container.html().trim();
    var canvas1 = document.createElement('canvas');
    var w=1366,h=768;
    canvas1.id     = "canvas1";
    canvas1.width  = w;
    canvas1.height = h;
    document.getElementById('pngcon').appendChild(canvas1);

    var canvas = document.getElementById('canvas1');

    canvg(canvas, content);
    var theImage = canvas.toDataURL('image/png');
    var a = document.createElement("a");
    a.id="imagepng"
    a.download = fileName+chartId+".png";
    a.href = theImage;
    document.body.appendChild(a);
    document.getElementById("imagepng").click();
    $("#pngcon").html('');

    $("#imagepng").remove();
}

上面的代碼工作正常，並將所有svgs下載為png圖像，但正如你所看到的那樣，調用saveImage（）方法幾乎使用8次相同的語句。 所以我嘗試使用循環像這樣做 -

function downloadImage()
   {
       for(i=1;i<=8;i++)
       {
           saveImage('chart'+i);
       }
   }

但是這次svg中的一個被錯過了。 我對這里發生的事情一無所知。 請幫忙......

Answer 1

問題

canvg方法是異步的，這意味着您需要使用回調方法才能使其正常工作。

如果沒有，結果可能會有些隨機，具體取決於各種因素，例如緩存，canvg內部svg-to-canvas的處理，瀏覽器處理內部圖像的URL的速度等等。

解決方案：處理異步性質

首先，您需要修改saveImage()方法以進行回調：

function saveImage(chartId, callback) { ... }

然后在其中，使用canvg的回調：

canvg(canvas, content, {renderCallback: function() {
    var theImage = canvas.toDataURL('image/png');
    var a = document.createElement("a");
    a.download = fileName+chartId+".png";
    a.href = theImage;
    document.body.appendChild(a);
    a.click();               // use the element directly instead of getting it from DOM
    $("#pngcon").html('');
    $("#imagepng").remove();

    callback();                                 // gets next image
}});

現在我們可以創建一個異步使用它的“循環”：

function downloadImage(doneCallback) {
    var i = 0;                                  // accessible from within next()
    (function next() {
        if (++i < 9) {                          // increase counter, then check [1,8]
            saveImage('chart' + i, next);       // use this method as callback
        }
        else {
            if (doneCallback) doneCallback();   // when done, invoke main callback
        }
    })();                                       // self-invokes next()
}

您現在downloadImage使用可選的回調調用downloadImage ：

downloadImage(function() {alert("done")})

但是，您可能需要考慮是否在生成a標記的同一輪中調用click。 您可以向a元素添加一個click事件處理程序，然后從那里調用回調，但這會導致一種過於復雜的方法。

或者您可以使用ID方法（只記得使用唯一ID）並迭代它們然后執行click（）調用（來自doneCallback）。

但是，這超出了這個問題的范圍。