HTML5畫布中是否有任何事件表明圖像已被繪製？

我正在使用<input type='file' onchange="readURL(this)"/>控件將圖像上傳到我的網絡服務。這裏我使用canvas來減小圖像大小。代碼工作正常，但在第一次嘗試上傳圖像時發送空白圖像，第二次嘗試發送第一張圖像。這意味着我需要畫布的事件，它告訴我，當圖像已經繪製在畫布HTML5畫布中是否有任何事件表明圖像已被繪製？

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var canvas = document.getElementById('canvas1'); 
     var context = canvas.getContext('2d'); 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      var imageObj = new Image();     
      imageObj.onload = function() { 
       context.drawImage(imageObj, 0, 0, 300, 275); 
      }; 
      imageObj.src = e.target.result.toString(); 

      $.ajax({ 
       //My Web Service call code 
      });     
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
}

所以，問題是有沒有在HTML5畫布它告訴圖像的任何事件已經繪就？

來源

2013-06-19 user1390378

您必須移動onload處理圖像內的$.ajax電話：

var imageObj = new Image();     
imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0, 300, 275); 

    $.ajax({ 
     //My Web Service call code 
    }); 
}; 
imageObj.src = e.target.result.toString();

您的代碼書面正在作出Ajax調用圖像加載之前，圖像沒有被畫到畫布直到發生負載。

來源

2013-06-19 19:43:44 apsillers

嘗試使用reader.onloadend而不是reader.onload。

順便說一句，在一個無關緊要的事情中，Chrome中有一個新的錯誤是使用新的Image（）函數來觸發的。

如果您使用替代品：document.createElement("img")，您會很好。

最後（不重要），因爲您正在處理圖像文件，所以您可以查看FileReader上的reader.readAsDataURL選項。

來源

2013-06-19 19:43:06 markE

HTML5畫布中是否有任何事件表明圖像已被繪製？

回答

相關問題