Lỗi chưa gặp: INDEX_SIZE_ERR

Question

Tôi vẽ trên vải với dòng sau:

ctx.drawImage (compositeImage, 0, 0, image.width, image.height, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight);

Mã này đã thực hiện lỗi miễn phí trên Safari, Chrome, Firefox (và thậm chí cả IE sử dụng thư viện excanvas của google). Tuy nhiên, một bản cập nhật gần đây để Chrome hiện ném các lỗi sau:

của router Lỗi: INDEX_SIZE_ERR: DOM ngoại lệ 1

Mã này thường vị trí một phần hoặc tất cả các hình ảnh được vẽ OFF vải, bất cứ ai có bất kỳ ý tưởng những gì đang xảy ra ở đây?

Answer 1

Có phải compositeImage trỏ vào hình ảnh hợp lệ (được tải đầy đủ) không?

Tôi đã thấy ngoại lệ này xảy ra nếu bạn cố gắng vẽ hình ảnh trước khi hình ảnh được tải.

Ví dụ:

img = new Image(); 
img.src = '/some/image.png'; 
ctx.drawImage(img, .....); // Throws error 

nên được một cái gì đó giống như

img = new Image(); 
img.onload = function() { 
    ctx.drawImage(img, ....); 
}; 
img.src = '/some/image.png'; 

Để đảm bảo hình ảnh đã nạp.

Answer 2

Tại sao?

Nó sẽ xảy ra nếu bạn vẽ hình ảnh trước khi nó được nạp bởi vì đó là những gì mà dự thảo html5 2dcontext quy định cụ thể cho việc diễn giải số đầu tiên của drawImage():

If one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception.

sw, sh là chiều rộng nguồn hình ảnh và chiều cao

câu trả lời của @ jimr là tốt, chỉ cần nghĩ rằng nó sẽ có liên quan để thêm điều này ở đây.

Answer 3

Do trải nghiệm của tôi, INDEX_SIZE_ERR trong IE (thậm chí phiên bản 10) có khả năng xảy ra khi bạn đang hoạt động trên canvas đã được thao tác với drawImage() với kích thước clip sai.

Và nếu bạn nạp hình ảnh của bạn tự động, sau đó có khả năng là giá trị của image.width và image.height là ==0, vì vậy bạn được gọi

ctx.drawImage(compositeImage, 0, 0, 0, 0, ... 

Trong trường hợp của tôi là giải pháp (mà làm việc) là sử dụng image.naturalWidth và thay vào đó, image.naturalHeight.

Answer 4

Một nguyên nhân khác gây ra lỗi này là kích thước của hình ảnh nguồn quá lớn; chúng mở rộng ra ngoài kích thước hình ảnh thực tế. Khi điều này xảy ra, bạn sẽ thấy lỗi này trong IE, nhưng không thấy trong Chrome hoặc Firefox.

Giả sử bạn có một hình ảnh 150x150:

var imageElement = ...; 

Sau đó, nếu bạn cố gắng để vẽ nó bằng tham số nguồn lớn hơn:

var sourceX = 0; 
var sourceY = 0; 
var sourceWidth = 200; // Too big! 
var sourceHeight = 200; // Too big! 
canvasContext.drawImage(imageElement, 
    sourceX, sourceY, sourceWidth, sourceHeight, // Too big! Will throw INDEX_SIZE_ERR 
    destX, destY, destWidth, destHeight); 

này sẽ ném INDEX_SIZE_ERR trên IE. (Các trình duyệt IE mới nhất là IE11 tại thời điểm viết bài này).

Việc sửa chữa chỉ đơn giản là hạn chế kích thước nguồn:

var sourceWidth = Math.min(200, imageElement.naturalWidth); 
var sourceHeight = Math.min(200, imageElement.naturalHeight); 

câu trả lời malloc4k của ám chỉ này, tuy nhiên, ông đề nghị đó là vì image.width bằng không. Tôi đã thêm câu trả lời mới này vì chiều rộng hình ảnh bằng 0 không nhất thiết là nguyên nhân của lỗi trên IE.