Question

我有一个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

编辑：

我已经更新了示例，以便在开头包含宽度和高度定义

编辑29 / Apr / 2013：

10毫秒的延迟并不总是足够 - 我已经更改了代码以检查画布像素以确定是否绘制了任何内容 - 这感觉就像是一个丑陋的黑客 - 我很想知道是否有更好的方法：

... 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

Answer 1

我在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://....';

我不明白为什么ie9在实际上没有加载或者在画布中没有“可用”时触发加载图像功能。它让我把头发拉出来。

Answer 2

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);
}

您必须设置src，然后等待图片加载。

Internet Explorer 9有时会在画布上绘制空白图像

2 个答案: