等待圖像載入中Javascript

Question

我有以下問題。

function getBase64Image() { 
    var svg = //some svg string; 
    var canvas = document.createElement('canvas'); 
    var mimetype = 'image/png'; 
    canvas.width = 600; 
    canvas.height = 600; 
    var timg = new Image(), 
    ctx = canvas.getContext('2d'); 
    timg.width = 600; 
    timg.height = 600; 
    timg.onload = function() { 
     document.body.appendChild(canvas); 
      try { 
       ctx.clearRect(0, 0, 600, 600); 
       ctx.drawImage(timg, 0, 0); 
      } 
      catch (e) { 
       return false; 
      } 
     var strData = canvas.toDataURL(mimetype); 
     document.body.removeChild(canvas); 
     img_data = strData; 
     } 
     timg.src = 'data:image/svg+xml;base64,' + svg; 
    } 
    return img_data; 
} 

基本上我想將svg轉換成png。 我有svg字符串，然後加載圖像並用畫布繪製。然後我爲png圖像獲取base64字符串。 我遇到的問題是函數getBase64Image在加載圖像之前退出。 我該如何預防？

也許使用延遲或重寫功能？ 我谷歌搜索，但無法找到密切的答案。

謝謝。

Answer 1

您不能在同步函數中更改異步函數。

最簡單的辦法是通過一個回調：

function fetchBase64Image(callback) { 
    var svg = //some svg string; 
    var canvas = document.createElement('canvas'); 
    var mimetype = 'image/png'; 
    canvas.width = 600; 
    canvas.height = 600; 
    var timg = new Image(), 
    ctx = canvas.getContext('2d'); 
    timg.width = 600; 
    timg.height = 600; 
    timg.onload = function() { 
     document.body.appendChild(canvas); 
      try { 
       ctx.clearRect(0, 0, 600, 600); 
       ctx.drawImage(timg, 0, 0); 
      } 
      catch (e) { 
       return false; 
      } 
     var strData = canvas.toDataURL(mimetype); 
     document.body.removeChild(canvas); 
     img_data = strData; 
     callback(img_data); 
     } 
     timg.src = 'data:image/svg+xml;base64,' + svg; 
    } 
} 

並且你使用這樣的：

fetchBase64Image(function(img_data){ 
    // use the image img_data 
}):