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引数が必要です。