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>