在Internet Explorer 9和歌剧中，在画布中加载图像失败 [英] load image in canvas fail under Internet Explorer 9 and opera
问题描述
<!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>
我打开一个新窗口在新窗口中绘制一个画布时调用此函数包含一个数组的图片。
i call this function when i open a new window to draw a canvas in the new window contains an array of images.
问题：
1- Internet explorer 9：但是它没有绘制图像（因为我在画布样式中设置的边框出现）。
1- Internet explorer 9: draw canvas but it didn't draw images (since the border that i set in the style of the canvas appears).
2-当IE尝试获取图像时出现此错误
2- when IE try to get image this error appears
SCRIPT5022: Exception thrown and not caught
index.html, line 1 character 1
3- Opera 12：它没有显示画布。
3- Opera 12: it didn't display canvas.
注意：
1-此功能适用于Firefox，google chrome和safari。
1- this function works fine with Firefox, google chrome, and safari.
2-我确定互联网浏览器不在兼容性视图（F12），而不是Quirks模式（它是标准）。
2- i am sure that internet explorer are not in compatibility view (F12) and not Quirks mode (it is standards).
任何帮助？
any help?
推荐答案
<!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>
不知道canvas标签的含义，如果我们在我们的标记中使用它，IE将为我们提供一个错误。
since IE doesn't know what the canvas tag means, and if we used that in our markup, IE would serve us an entrée of error. Instead we create a canvas element in JavaScript.
希望这有助于你
这篇关于在Internet Explorer 9和歌剧中，在画布中加载图像失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
