如何將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和我在注釋中所述，當不需要 base64字符串時，請使用canvas.toDataURL 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參數。