將HTML畫布轉換爲圖像。 Javascript

Question

我想導出我的HTML畫布到圖像。但是當我輸出圖像時，我不斷收到img src =「undefined」。我直接將畫布打印到頁面上，並確認我獲得了正確的畫布。這是我正在使用的代碼。請讓我知道你看到的是錯誤的。可能是CORS的問題（這是HTML5）？

scope.getShuttleImage = function() { 
      var tmpPng 
      var imageElement 
      html2canvas(document.body.getElementsByClassName("shuttle-truck"), { 
       useCORS: true, 
       onrendered: function (canvas) { 
        tmpPng = canvas.toDataURL("image/png"); 

       } 
      }); 
      document.write('<img src= "' + tmpPng+'"/>"') // Just for testings sake 
     }; 

Answer 1

我相信問題是html2canvas是異步的。嘗試將您的代碼更改爲以下內容。像@Archer說的那樣

scope.getShuttleImage = function() { 
     var tmpPng 
     var imageElement 
     html2canvas(document.body.getElementsByClassName("shuttle-truck"), { 
      useCORS: true, 
      onrendered: function (canvas) { 
       tmpPng = canvas.toDataURL("image/png"); 
       document.write('<img src= "' + tmpPng+'"/>"') // Just for testings sake 

      } 
     }); 
    };