Chrome並未在畫布中繪製特定的jpg圖像

Question

我試圖在畫布中繪製圖像。這在Firefox，但無法在Chrome 49

context.drawImage(backgroundImage, 0, 0); 

的jsfiddle：https://jsfiddle.net/kp5otnyu/3/

圖片鏈接：http://www.boardgame-online.com/img/stackoverflow_chrome_test.jpg

東西似乎是錯誤的圖像。我們嘗試在另一個繪製的jpg中處理圖像，然後運行。但這張圖片有什麼問題？

Answer 1

這個問題在Chrome 50中得到解決。當我在更新的瀏覽器，圖像顯示打開的jsfiddle。

Answer 2

編輯：這是不是一個答案，所有的歡呼@kaiido

工作例如：

var backgroundImage = new Image(); 
 

 
var canvas = document.createElement("canvas"); 
 
var context = canvas.getContext("2d"); 
 
canvas.width = 500; 
 
canvas.height = 100; 
 
\t \t \t \t 
 
backgroundImage.onload = function(){ 
 
\t context.clearRect(0, 0, 300, 300); 
 
\t context.drawImage(backgroundImage, 0, 0); 
 
} 
 
backgroundImage.src = "http://www.boardgame-online.com/img/stackoverflow_chrome_test.jpg"; 
 

 
$("#test").append(canvas);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div id="test"> 
 

 
</div>

不起作用例如：

var backgroundImage = new Image(); 
 

 
var canvas = document.createElement("canvas"); 
 
var context = canvas.getContext("2d"); 
 
canvas.width = 400; 
 
canvas.height = 400; 
 
\t \t \t \t 
 
backgroundImage.onload = function(){ 
 
\t context.clearRect(0, 0, 300, 300); 
 
\t context.drawImage(backgroundImage, 0, 0); 
 
} 
 
backgroundImage.src = "http://www.boardgame-online.com/img/stackoverflow_chrome_test.jpg"; 
 

 
$("#test").append(canvas);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div id="test"> 
 

 
</div>