gpt4 book ai didi

javascript - 在 Internet Explorer 9 和 Opera 下,在 Canvas 中加载图像失败

转载 作者:搜寻专家 更新时间:2023-10-31 08:35:53 25 4
gpt4 key购买 nike

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

我在打开一个新窗口时调用这个函数在新窗口中绘制一个包含图像数组的 Canvas 。

问题:

1- Internet explorer 9:绘制 Canvas 但没有绘制图像(因为出现了我在 Canvas 样式中设置的边框)。

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

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

3- Opera 12:它不显示 Canvas 。

注意:

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

2- 我确定 Internet Explorer 不在兼容性 View (F12) 中,也不是 Quirks 模式(这是标准模式)。

有什么帮助吗?

最佳答案

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

加载我的页面后,将调用一个函数在已创建的 Canvas 元素中加载图像 (.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;
}

关于javascript - 在 Internet Explorer 9 和 Opera 下,在 Canvas 中加载图像失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11167468/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com