如何將base64 svg圖像轉換爲base64圖像png

-1

我有一個將圖表轉換爲svg的代碼。但我需要輸出格式爲PNG圖像。 svgString2Image是返回編碼的base64 svg的函數。我該怎麼做？非常感謝你。如何將base64 svg圖像轉換爲base64圖像png

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

來源

2017-10-18 yavg

使用回調。 – Bergi

@meager鏈接的問答如何解決當前問題的代碼問題？ – guest271314

'format'從不使用，但canvas.toBlob默認爲'image/png'。如果您想要指定格式，請在canvas.toBlob中添加''image /'+ format'作爲第二個參數。 –

正如@ 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 
});

來源

2017-10-18 17:04:58

謝謝！我可以在不使用回調的情況下獲得base64字符串，例如：'var png = svgString2Image（svgString，800，600，'png）' – yavg

「另外image.onload是異步的，因此不可能」返回「base64 png字符串。你必須使用callback（或者以@ guest271314表示的Promise）。「 - 從回答請讀 –

好吧，我想知道是否有另一種方法。非常感謝你。 – yavg

無功能傳遞給svgString2Image在最後一個參數。將函數傳遞給svgString2Image，該函數預計參數爲blob和filesize。

來源

2017-10-18 16:05:10 guest271314

你能幫我嗎？我只需要在base64中返回一個圖像的結果png – yavg

'return'是什麼意思？你編寫了這個函數; 'callback'的目的是什麼？ 'svgString2Image（svgString，800,600，'png'，function（blob，filesize）{//做blob和filesize}）;' – guest271314

這意味着，返回字符串base64在png中。我沒有用這部分代碼的目的。我有它的情況下，這可以幫助產生字符串在PNG。 – yavg

如何將base64 svg圖像轉換爲base64圖像png

回答

相關問題