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

Chrome not drawing specific jpg image in canvas

本文关键字：jpg 图像 绘制 布中 Chrome      更新时间：2023-09-26

我正在尝试在画布上绘制图像。这适用于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中处理图像，然后它起作用了。但是这个图像有什么问题？

编辑：这不是一个答案，所有的欢呼都@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/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;
				
backgroundImage.onload = function(){
	context.clearRect(0, 0, 300, 300);
	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>

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

相关文章：