html5 canvas toDataURL返回空白圖像

我使用以下代碼繪製畫布並使用toDataUrl將其保存爲png圖像。html5 canvas toDataURL返回空白圖像

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     #myCanvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script> 
     function loadImages(sources, callback) { 
     var images = {}; 
     var loadedImages = 0; 
     var numImages = 0; 
     // get num of sources 
     for(var src in sources) { 
      numImages++; 
     } 
     for(var src in sources) { 
      images[src] = new Image(); 
      images[src].onload = function() { 
      if(++loadedImages >= numImages) { 
       callback(images); 
      } 
      }; 
      images[src].src = sources[src]; 
     } 
     } 

     window.onload = function(images) { 
     var canvas = document.getElementById("myCanvas"); 
     var context = canvas.getContext("2d"); 

     var sources = { 
      darthVader: "http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc6/228564_449431448422343_1996991887_n.jpg", 
      yoda: "http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc7/427489_449423165089838_503188418_n.jpg" 
     }; 

     loadImages(sources, function(images) { 
      context.drawImage(images.darthVader, 250, 30, 250, 250); 
      context.drawImage(images.yoda, 530, 30, 250, 250); 
     }); 


// save canvas image as data url (png format by default) 
     var dataURL = canvas.toDataURL(); 

     // set canvasImg image src to dataURL 
     // so it can be saved as an image 
     document.getElementById("canvasImg").src = dataURL; 
}; 


    </script> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="850" height="315"></canvas> 
<img id="canvasImg" alt="Right click to save me!"> 
    </body> 
</html>

但我的PNG圖像顯示爲空白圖像。我只看到一張空白的圖像。我搜索了這個，但沒有發現任何東西。我使用php和chrome瀏覽器。這裏有什麼問題？

來源

2012-08-17 Badal

的可能的複製[HTML5畫布toDataURL返回空白（http://stackoverflow.com/questions/31193418/html5-canvas-todataurl-returns-blank） – 2016-12-01 11:48:08

您首先調用loadImages，然後在此之後獲取數據URL loadImages調用。但是，如您的loadImages實現所示，調用它僅僅是開始加載過程;當所有圖像已被加載，這是將來的某個時間調用回調。

目前您正在獲取空白圖片，因爲圖片尚未加載，所以您的回調尚未調用，因此您的畫布仍爲空。

簡而言之，當這些圖像實際加載時（即您的預期toDataURL結果），應該執行依賴於圖像加載的所有內容 - 因此在回調中。

loadImages(sources, function(images) { 
    context.drawImage(images.darthVader, 250, 30, 250, 250); 
    context.drawImage(images.yoda, 530, 30, 250, 250); 

    var dataURL = canvas.toDataURL(); 
    document.getElementById("canvasImg").src = dataURL; 
});

來源

2012-08-17 11:44:30 pimvdb

沒有任何反應，當我加入到這個回調。甚至沒有將src設置爲DataURL – Badal 2012-08-17 11:52:59

@Badal Surana：圖像是否畫在畫布上？控制檯中有任何錯誤？ – pimvdb 2012-08-17 11:54:38

控制檯出現錯誤。您正在從其他網站上繪製圖像，並且作爲安全措施，您無法獲取數據網址。您可以將圖像託管在您自己的域上。 – pimvdb 2012-08-17 12:01:15

html5 canvas toDataURL返回空白圖像

回答

相關問題