我有一个 Web 应用程序,它可以动态生成图像,然后使用画布在客户端上呈现(片段)它们 - 通用代码看起来像这样(简化)......
var width = ...
var height = ...
var img = new Image();
img.onload = function(){ // Set onload before setting image source ;)
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
context.drawImage(this,0,0,width,height,0,0,width,height);
}
img.src = ...
在 Firefox 和 chrome 中,这很好用。在 IE9(有时是 IE10)中,这有时会导致空白图像。作为一种解决方法,我输入了...
var width = ...
var height = ...
var img = new Image();
img.onload = function(){
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
window.setTimeout(function(){
context.drawImage(img,0,0,width,height,0,0,width,height);
}, 10); // 10 millisecond delay here seems to give IE time to make sure the image is actually ready
}
img.src = ...
显然,随机延迟让我感到紧张——我宁愿弄清楚为什么会发生这种情况。图像上是否有其他可以使用的事件类型/方法/属性?与图像/编码/传输方法一起发送的 http 标头中是否可能存在导致此问题的内容?
由于在画布上绘制图像似乎会经常让新用户绊倒,因此搜索大多会产生开发人员在 onload 方法之前设置源的实例。我能找到的最接近的其他问题/回复是:https ://stackoverflow.com/a/15186350/470062
编辑:
我已更新示例以在开始时包含宽度和高度定义
2013 年 4 月 29 日编辑:
10 毫秒的延迟并不总是足够的——我已经更改了代码以检查画布像素以确定是否绘制了任何东西——但这感觉就像一个丑陋的 hack——我很想知道是否有更好的方法:
... snip - this is at the end of the image load callback..
if((navigator.appVersion.indexOf("MSIE")) >= 0){
function checkAndRedraw(){
context.clearRect(0,0,width,height);
context.drawImage(img, 0, 0, width, height);
var imageData = context.getImageData(0, 0, width, height),
data = imageData.data,
len = data.length;
for (var i = 0; i < len; i += 4){
if(data[i] || data[i+1] || data[i+2]){
scheduleRedraw = null; // prevent memory leak
return; // A pixel contained some non empty value so something was drawn - done.
}
}
scheduleRedraw();
}
var redrawHackTimeout;
function scheduleRedraw(){
window.clearTimeout(redrawHackTimeout);
redrawHackTimeout = window.setTimeout(checkAndRedraw, 500);
}
scheduleRedraw();
}
//END IE9 Hack