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

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

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

但是,这超出了这个问题的范围.