在Internet Explorer 9和歌剧在画布上载图像失败(load image in can

<!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-歌剧12：它没有显示画布。

注意：

1 - 此功能工作正常使用Firefox，谷歌Chrome和Safari。

2-我确信，Internet Explorer是不兼容视图（F12），而不是怪癖模式（它是标准）。

任何帮助吗？

Answer 1:

<!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中创建一个canvas元素。

希望这有助于您

Answer 2:

嗯..有趣。我觉得我有一个类似的问题，我只会到标签栈。

我的页面加载后，调用函数中已经创建的canvas元素加载的图片（.png）。一半在IE浏览器未加载此图像的时间。我得打刷新，并最终将其显示出来。在Firefox和铬它工作在第一次尝试。有时工作在第一次尝试在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;
}

Answer 3:

如果你调用的draw页面加载后的功能，那么你将不得不更换document.write(...)因为它会创建一个新的页面，IE浏览器将无法完成图像的onload处理程序（不同于至少铬）。

$("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>')

文章来源: load image in canvas fail under Internet Explorer 9 and opera