问题

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
}});

现在我们可以创建一个＆＃34;循环＆＃34;这是异步使用的：

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(function() {alert("done")})

但是，您可能需要考虑是否在生成a标记的同一轮中调用click。您可以向a元素添加一个click事件处理程序，然后从那里调用回调，但这会导致一种过于复杂的方法。

或者您可以使用ID方法（只记得使用唯一ID）并迭代它们然后执行click（）调用（来自doneCallback）。

但是，这超出了这个问题的范围。

无法使用canvg将svg转换为png

1 个答案:

问题

解决方案：处理异步性质