context.drawImage() không hoạt động với trường hợp Image() mới (chrome)

Question

Tôi đang cố gắng tìm ra lý do cách tải trước hình ảnh cổ điển trước khi vẽ trong canvas đang kích hoạt "Lỗi loại" trên chrome.

Hãy xem tình hình:

Tôi cố gắng để tải trước hình ảnh trong 3 cách khác nhau:

1. tạo ra một hình ảnh mới() Ví dụ
2. tạo ra một yếu tố hình ảnh
3. tạo ra một hình ảnh jQuery đối tượng

Hoặc nếu bạn thích một số mã:

var canvas1 = document.getElementById('canvas-1'), 
    context1 = canvas1.getContext('2d'), 
    image1 = new Image(), 
    canvas2 = document.getElementById('canvas-2'), 
    context2 = canvas2.getContext('2d'), 
    image2 = document.createElement('img'), 
    $canvas3 = $('#canvas-3'), 
    context3 = $canvas3.get(0).getContext('2d'), 
    $image3 = $('<img>'), 
    loadImage = function (image, context, debugIndice) { 
     debugIndice = debugIndice || -1; 
     image.onload = function() { 
      try { 
       context.drawImage(this, 0, 0, 100, 100); 
      } 
      catch (e) { 
       console.log('error for debugIndice', debugIndice, e, this); 
      } 
     } 
     image.src = "http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"; 
    }; 

loadImage(image1, context1, 1); 
loadImage(image2, context2, 2); 
loadImage($image3.get(0), context3, 3); 

Vui lòng xem Fiddle tại đây.

Tôi chỉ gặp lỗi Loại cho cuộc gọi tải hình ảnh đầu tiên.

Tôi đang sử dụng Google Chrome 27.0.1453.94 trên Windows tại công ty của tôi và Google Chrome 27.0.1453.93 trên Mac OS X, cả hai nền tảng x64.

Mã này hoạt động tốt trong Firefox, và thậm chí IE9 (Tôi không đùa, tôi thề nó)

Có ai đó biết về hình ảnh này() vấn đề giai cấp trong Chrome?

EDIT: Đây là một màn hình của lỗi:

Bạn có thể xem nó trên kích thước thực here.

Đây không phải là một vấn đề lớn, dù sao tôi sẽ sử dụng cách jQuery, nhưng tôi thực sự tò mò muốn biết nguyên nhân là gì và tại sao tôi lại mất thời gian để sửa nó!

Tôi đã xem số bug này.

Tôi vẫn yêu cầu vì tôi không chắc chắn rằng nó giống nhau?!

Answer 1

Đó không hẳn là một giải pháp vì đây là một lỗi Chrome Nhưng đây là lỗi liên quan đến Chrome trên tracker của họ Nó là một vấn đề được biết đến và cần được sửa chữa trong - hy vọng - tương lai gần. https://code.google.com/p/chromium/issues/detail?id=238071

trong khi đó, sử dụng document.createElement("img") thay vì new Image().

Answer 2

Điều đó làm tôi khó chịu và tôi không có câu trả lời hay hơn, nhưng sau khi bật và tắt tất cả các tiện ích mở rộng, thử các kênh beta và kênh dev, công việc cuối cùng đã khởi động lại máy tính của tôi. Bây giờ drawImage hoạt động tốt. . :(