Chrome 未在 canvas 中绘制特定的 jpg 图像

Question

我正在尝试在 canvas 中绘制图像。这适用于 Firefox 但不适用于 Chrome 49.

context.drawImage(backgroundImage, 0, 0);

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

图片link：http://www.boardgame-online.com/img/Whosebug_chrome_test.jpg

图像似乎有问题。我们尝试在另一个绘制的 jpg 中处理图像，然后它起作用了。但是这张图有什么问题吗？

Answer 1

编辑：这不是答案，所有的欢呼声 @kaiido

工作示例：

var backgroundImage = new Image();

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 100;
    
backgroundImage.onload = function(){
 context.clearRect(0, 0, 300, 300);
 context.drawImage(backgroundImage, 0, 0);
}
backgroundImage.src = "http://www.boardgame-online.com/img/Whosebug_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;
    
backgroundImage.onload = function(){
 context.clearRect(0, 0, 300, 300);
 context.drawImage(backgroundImage, 0, 0);
}
backgroundImage.src = "http://www.boardgame-online.com/img/Whosebug_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>

Answer 2

此问题已在 Chrome 50 中解决。当我在更新的 Chrome 中打开 JSFiddle 时，图像显示。

Chrome 未在 canvas 中绘制特定的 jpg 图像

Chrome not drawing specific jpg image in canvas

javascript

jpeg

google-chrome

canvas