在 Internet Explorer 9 和歌剧下加载画布中的图像失败答案

【问题标题】：load image in canvas fail under Internet Explorer 9 and opera在 Internet Explorer 9 和歌剧下加载画布中的图像失败
【发布时间】：2012-06-23 06:38:37
【问题描述】：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="resources/js/jquery-1.7.2.min.js"> </script>
        ...
        ...
        <script>
            ...
            ...
            function draw(screen, data) {  
                if (screen.document.getElementById("screen") == null){
                    screen.document.write('<div id="screen" style="width:' +
                    data.maxX + '; height:' + data.maxY + '; margin: auto;" >' +
                    '<canvas id="screenCanvas" width=' + data.maxX + ' height=' + 
                    data.maxY + 'style="border:2px solid #000000;color:#000000;" > </canvas></div>');
                }
                var canvas = screen.document.getElementById('screenCanvas');
                var context = canvas.getContext('2d');  
                var tileY = 0;
                var tileX = 0;
                var counter = 0;
                var tileWidth = data.tileWidth;
                var tileHeight = data.tileHeight;
                for (var i=0;i<(data.maxX/data.tileWidth);i++){  
                    for (var j=0;j<(data.maxY/data.tileHeight);j++){  
                        var img = new Image();  
                        img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
                            return function() {
                                context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
                            }
                        })(img, tileX, tileY, tileWidth, tileHeight);  
                        img.src = "http://myserver:8080/images/screen/tile/" + 
                                   data.tiles[counter].imageId; 
                        tileX = tileX + parseInt(data.tileWidth); 
                        counter ++; 
                     } 
                    tileY = tileY + parseInt(data.tileHeight); 
                    tileX = 0;
                }  
            }
            ...
            ...
        </script>
    </head>
    <body>
        ...
        ...
        ...
        ...
    </body>
</html>

当我打开一个新窗口以在新窗口中绘制一个包含图像数组的画布时调用此函数。

问题：

1- Internet explorer 9：绘制画布但它没有绘制图像（因为我在画布样式中设置的边框出现了）。

2- 当 IE 尝试获取图像时出现此错误

SCRIPT5022: Exception thrown and not caught 
index.html, line 1 character 1

3- Opera 12：它没有显示画布。

注意：

1- 此功能适用于 Firefox、google chrome 和 safari。

2- 我确定 Internet Explorer 不在兼容性视图 (F12) 中，也不是 Quirks 模式（这是标准）。

有什么帮助吗？

【问题讨论】：

很好地展示了一个问题。

标签： javascript html internet-explorer canvas opera

【解决方案1】：

嗯.. 有趣。我想我遇到了类似的问题，我将标记到这个堆栈上。

加载我的页面后，将调用一个函数在已创建的画布元素中加载图像 (.png)。在 IE 中，有一半时间没有加载此图像。我必须点击刷新，最终它会出现。在 Firefox 和 chrome 中，它在第一次尝试时就可以工作。有时它也适用于 IE 的第一次尝试，但这种不规则性让我很生气....

function loadCanvas(dataURL) {
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
   X_max = parseInt($("#container").css('width'));
   Y_max = parseInt($("#container").css('height'));

   canvas.width = X_max;
   canvas.height = Y_max;

   ctx.fillStyle="white";
   ctx.fillRect(0, 0, X_max, Y_max);


   // load image from data url
   var imageObj = new Image;

   imageObj.onload = function() {
   ctx.drawImage(this, 0, 0);
   };

   imageObj.src = dataURL;
}

【讨论】：

你发现了吗？我在 IE9 中得到了非常相似的东西。它到达drawImage ok吗？
不——还没有弄清楚。 IE 似乎不喜欢画布。我的选择之一就是将 png 作为背景图像加载并告诉用户“IE 用户先生，不要为你画画”。不确定它是否到达drawimage ok->加载文档时调用该函数...但是它正在加载的图像通常有几百kb大..我想如果“文档”被打断在完成加载之前某个地方的另一个请求（我有一个同步循环），它会终止画布请求。我想，需要更多地探索它——希望在这里得到快速帮助

【解决方案2】：

如果您在页面加载后调用draw 函数，那么您将不得不替换document.write(...)，因为它将创建一个新页面并且IE 不会完成图像加载处理程序（至少不像chrome )。

$("body").append('<div id="screen" style="width:' +
                    data.maxX + 'px; height:' + data.maxY + 'px; margin: auto;" >' +
                    '<canvas id="screenCanvas" width=' + data.maxX + ' height=' + 
                    data.maxY + style="border:2px solid #000000;color:#000000;"></canvas</div>')

【讨论】：

如何使用 $("body").append(....);在新窗口中（如上所述，我想在一个名为 screen 的新窗口中添加画布）？
IE9 支持画布，这是真的，但我遇到了同样的问题，我用我发布的答案解决了它。

【解决方案3】：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="resources/js/jquery-1.7.2.min.js"> </script>
        ...
        ...
        <script>
            ...
            ...
            function draw(screen, data) {  
                var canvas;
                if (screen.document.getElementById("screen") == null){
                    var canvasDiv = screen.document.createElement("div"); 
                    canvasDiv.id = "screen"; 
                    canvasDiv.style.margin = "0px auto";
                    canvasDiv.style.width = data.maxX;
                    canvasDiv.style.height = data.maxY;
                    canvasDiv.style.border='2px solid black';
                    screen.document.body.appendChild(canvasDiv); 

                    canvas = screen.document.createElement('canvas');
                    canvas.setAttribute('width', data.maxX);
                    canvas.setAttribute('height', data.maxY);
                    canvas.setAttribute('id', 'screenCanvas');
                    canvasDiv.appendChild(canvas);
                    if(typeof G_vmlCanvasManager != 'undefined') {
                        canvas = G_vmlCanvasManager.initElement(canvas);
                    }
                }else{
                    canvas = screen.document.getElementById('screenCanvas');
                }

                var context = canvas.getContext('2d');  
                var tileY = 0;
                var tileX = 0;
                var counter = 0;
                var tileWidth = data.tileWidth;
                var tileHeight = data.tileHeight;
                for (var i=0;i<(data.maxX/data.tileWidth);i++){  
                    for (var j=0;j<(data.maxY/data.tileHeight);j++){  
                        var img = new Image();  
                        img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
                            return function() {
                                context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
                            }
                        })(img, tileX, tileY, tileWidth, tileHeight);  
                        img.src = "http://myserver:8080/images/screen/tile/" + 
                                   data.tiles[counter].imageId; 
                        tileX = tileX + parseInt(data.tileWidth); 
                        counter ++; 
                     } 
                    tileY = tileY + parseInt(data.tileHeight); 
                    tileX = 0;
                }  
            }
            ...
            ...
        </script>
    </head>
    <body>
        ...
        ...
        ...
        ...
    </body>
</html>

参考：www.williammalone.com

因为 IE 不知道 canvas 标签的含义，如果我们在标记中使用它，IE 会给我们带来错误。相反，我们在 JavaScript 中创建了一个画布元素。

希望对你有帮助

【讨论】：