我正在尝试在画布上绘制图像。这适用于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时,图像显示。