[英]Internet Explorer 9 sometimes draws blank images on canvas
I have a web application that generates images on the fly and then renders (segments of) them on the client using canvas - the general code looks something like this (simplified)... 我有一个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 = ...
In firefox and chrome, this works fine. 在Firefox和chrome中,可以正常工作。 In IE9 (and sometimes IE10), this sometimes results in a blank image. 在IE9(有时甚至是IE10)中,有时会导致图像空白。 As a workaround, I put in... 作为解决方法,我放入...
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 = ...
Obviously, putting in random delays is making me nervous - I would much rather figure out why this happens. 显然,拖延时间让我感到紧张-我宁愿弄清楚为什么会这样。 Is there another event type / method / property on images that may be used? 图像上是否还有其他事件类型/方法/属性? Could there perhaps be something in the http headers sent down with the images / the encoding / transfer method that is causing this? 可能是在HTTP标头中随图像/编码/传输方法一起发送的导致此问题的消息?
Since drawing images on the canvas seems to be something that trips up new users a lot, searches mostly yield instances where the developer set the source before the onload method. 由于在画布上绘制图像似乎使很多新用户感到困惑,因此搜索大多会产生实例,其中开发人员在onload方法之前设置了源。 The closest other question / reply I was able to find was this : https://stackoverflow.com/a/15186350/470062 我能够找到的最接近的其他问题/答复是: https : //stackoverflow.com/a/15186350/470062
Edit: 编辑:
I have updated the examples to include width and height definitions at the start 我已经更新了示例,在开始时就包括了宽度和高度的定义
Edit 29/Apr/2013: 编辑29 / Apr / 2013:
The 10 millisecond delay is not always sufficient - I have changed the code to check the canvas pixels to determine if anything has been drawn - This feels like such an ugly hack though - I would love to know if there is a better way : 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
I have the same issue in IE9, what I had to do is this too: 我在IE9中也遇到了同样的问题,我也必须这样做:
theImage = new Image();
theImage.onload = function() {
that = this;
setTimeout(function() {
that.onload2();
}, 100);
};
theImage.onload2 = function(){
#your old load function code
}
theImage.src = 'http://....';
I don't understand why ie9 triggers load image function when it's not actually loaded or not "usable" yet in a canvas. 我不明白为什么ie9在画布中尚未实际加载或“不可用”时会触发加载图像功能。 it makes me pull my hair out. 它使我拔出头发。
var img = new Image();
img.src = ...
img.onload = function(){ // Set onload before after 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);
}
You must set the src
, then wait for the image to load. 您必须设置src
, 然后等待图像加载。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.