如何将base64 svg图像转换为base64图像png

Question

我有一个将图表转换为svg的代码。但我需要输出格式为PNG图像。 svgString2Image是返回编码的base64 svg的函数。我该怎么做？非常感谢你。

function svgString2Image(svgString, width, height, format, callback) { 
    //console.log("svgString",svgString) 
    format ? format : 'png'; 

    var imgsrc = 'data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(svgString))); // Convert SVG string to data URL 
    var canvas = document.createElement("canvas"); 
    var context = canvas.getContext("2d"); 

    canvas.width = width; 
    canvas.height = height; 

    var image = new Image(); 
    image.onload = function() { 
     context.clearRect (0, 0, width, height); 
     context.drawImage(image, 0, 0, width, height); 

     canvas.toBlob(function(blob) { 
      var filesize = Math.round(blob.length/1024) + ' KB'; 
      if (callback) callback(blob, filesize); 
     }); 

    }; 
    ///**************************** 
    document.getElementById('my_image').src=imgsrc; 
    return image.src = imgsrc; 

} 

http://plnkr.co/edit/lPhmuYywPCdjQrnwhQcH?p=preview

Answer 1

正如@ guest271314和我在评论中所述，使用canvas.toDataURL时base64字符串是不需要的，canvas.toBlob。此外image.onload是异步的，因此不可能“返回”base64 png字符串。您必须使用回叫（或Promise，如@ guest271314所述）。

function svgString2Image(svgString, width, height, format, callback) { 
    // set default for format parameter 
    format = format ? format : 'png'; 
    // SVG data URL from SVG string 
    var svgData = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString))); 
    // create canvas in memory(not in DOM) 
    var canvas = document.createElement('canvas'); 
    // get canvas context for drawing on canvas 
    var context = canvas.getContext('2d'); 
    // set canvas size 
    canvas.width = width; 
    canvas.height = height; 
    // create image in memory(not in DOM) 
    var image = new Image(); 
    // later when image loads run this 
    image.onload = function() { // async (happens later) 
     // clear canvas 
     context.clearRect(0, 0, width, height); 
     // draw image with SVG data to canvas 
     context.drawImage(image, 0, 0, width, height); 
     // snapshot canvas as png 
     var pngData = canvas.toDataURL('image/' + format); 
     // pass png data URL to callback 
     callback(pngData); 
    }; // end async 
    // start loading SVG data into in memory image 
    image.src = svgData; 
} 

// call svgString2Image function 
svgString2Image(svgString, 800, 600, 'png', /* callback that gets png data URL passed to it */function (pngData) { 
    // pngData is base64 png string 
}); 

Answer 2

无功能传递给svgString2Image在最后一个参数。将函数传递给svgString2Image，该函数预计参数为blob和filesize。