NS_ERROR_NOT_AVAILABLE: Thành phần không khả dụng

Question

Tôi gặp sự cố. Tôi đang cố gắng vẽ một hình ảnh lên một khung hình. Hình ảnh không phải từ trang HTML, nhưng trên một tệp. Đây là mã tôi sử dụng:

var img = new Image(); 
img.src = "/images/logo.jpg"; 
this._canvas.drawImage(img, 300, 300);// this is line 14 

bây giờ, đây là vấn đề. Điều này dường như không hoạt động trên Firefox và IE10 (tôi chưa thử nghiệm trên các trình duyệt khác). Trên Firefox (21) tôi nhận được:

[19:09:02.976] NS_ERROR_NOT_AVAILABLE: Component is not available @ file:///D:/Watermellon/scripts/base-classes.js:14 

và trên IE10 tôi nhận được:

SCRIPT16389: Unspecified error. 
base-classes.js, line 14 character 13 

Các tập tin và thư mục của họ là:

root/index.html 
root/scripts/base-classes.js 
root/images/logo.jpg 

Bây giờ khi tôi thay đổi img.src đến một URL (một hình ảnh từ một trang web khác) mọi thứ hoạt động tốt, hình ảnh tự vẽ sau một sự chậm trễ (cho nó nhận được từ url). Tôi đang làm gì sai?

Answer 1

Tôi đoán các vấn đề được rằng hình ảnh không được tải nhưng trước khi bạn cố gắng sử dụng nó . Hãy thử điều này:

var img = new Image(); 
img.onload = function() { 
    this._canvas.drawImage(img, 300, 300);// this is line 14 
}; 
img.src = "images/logo.jpg"; 

Thuộc tính src được thiết lập sau ràng buộc sự kiện này bởi vì một hình ảnh lưu trữ của load sự kiện cháy ngay lập tức (mà là một vấn đề thường gặp trong IE).

Và theo cấu trúc của bạn, đường dẫn đến hình ảnh có lẽ sẽ là images/logo.jpg (tháo đầu tiên /)

Answer 2

Bạn cần phải chờ đợi cho hình ảnh để tải trước khi cố gắng để vẽ nó thành một canvas:

var img = new Image(); 
img.src = "/images/logo.jpg"; 
img.onload = function() { 
    this._canvas.drawImage(img, 300, 300);// this is line 14 
} 

Answer 3

Vấn đề mà tôi đoán ở đây, là khi các nguồn lực có sẵn ?, nhưng có một cách để xác nhận rằng các tài nguyên có sẵn, chỉ cần kiểm tra thuộc tính 'hoàn thành' của đối tượng hình ảnh.

if (img.complete == true){ 
    // is available. 
} else { 
    // wait until is ready. 
} 

Ngoài ra, bạn có thể tạo phương thức hợp nhất với sự kiện tải và phương pháp trì hoãn kiểm tra cả hai nội dung.

var img = new Image(); 
//first attach handler 
img.onload = function(e){ 
    if (e.target.complete == true) { 
      yourHandler(e); 
     } else {    
      var maxTimes = 10; 
      var countTimes = 0; 
      function retryLoadImage() { 
       setTimeout(function() { 
        if (countTimes > maxTimes) { 
         // -- cannot load image. 
         return; 
        } else { 
         if (e.target.complete == true) { 
          yourHandler(e); 
         } else { 
          retryLoadImage(); 
         } 
        } 
        countTimes++; 
       }, 50); 
      }; 
     } 
}; 
img.src = yourSource; 

Làm việc này cho tôi !!! trên IE và FF.