context.drawImage（）不適用於新的圖像（）實例（鉻）

我想弄清楚爲什麼圖像預加載之前，經典的方式在畫布上繪製一個「類型錯誤」的鉻。context.drawImage（）不適用於新的圖像（）實例（鉻）

讓我們看到的情況：

我嘗試三種不同的方式預先載入圖像：

創建一個新的圖像（）實例
創建圖像元素
創建一個jQuery圖像物體

或者如果您更喜歡一些代碼：

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);

請在這裏觀看Fiddle。

對於第一個loadImage調用，我只有一個Type錯誤。

我在我的公司的Windows上使用Google Chrome 27.0.1453.94，在Mac OS X上都使用這兩種x64平臺的Google Chrome 27.0.1453.93。

此代碼工作正常在Firefox，甚至IE9（我不是在開玩笑，我發誓）

是否有人知道在Chrome圖片（）類的問題？

編輯：這是錯誤的屏幕： Chrome - Image bug

你可以看它的真實大小here。

這不是一個大問題，無論如何我會使用jQuery的方式，但我真的很好奇，看看是什麼原因，爲什麼我會失去一些時間來修復它！我看了一下bug。

我還在問，因爲我不確定它是一樣的嗎？！

來源

2013-05-29 Flo-Schield-Bobby

沒有「類型錯誤」這裏是（鉻27） – devnull69

Hummmm奇怪，你們可以說我在哪個平臺上，你呢？ –

工作無法重現鉻您的問題25和Chrome 29（dev）在Ubuntu 12.04上。你確定它不是某種緩存問題嗎？ – apsillers

這不完全是一個解決方案，因爲這是一個Chrome有錯誤，但這裏是他們跟蹤有關Chrome有錯誤，這是一個衆所周知的問題，應該是在修復 - 希望 - 不久的將來：https://code.google.com/p/chromium/issues/detail?id=238071

在此期間，使用document.createElement("img")代替new Image()。

來源

2013-06-04 18:22:22

是的，我看到這之前問，看我的問題中的「錯誤」鏈接:) 最後，我使用jQuery的$（''）！ –

我有一個問題，圖像沒有加載，但onload事件確實觸發，所以沒有圖像繪製，併發生錯誤。 – user2340939

Strang認爲實際上，無論如何，你的圖像本身可能會被二元破壞？ –

這讓我覺得很困難，我沒有更好的答案，但是打開和關閉所有擴展程序，嘗試測試版和開發通道之後，終於有效的是重新啓動計算機。現在drawImage工作得很好。。:(

來源

2013-05-29 19:32:42 UltimateBrent

context.drawImage（）不適用於新的圖像（）實例（鉻）

回答

相關問題