在 Internet Explorer 9 和 Opera 下在画布中加载图像失败
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>
当我打开一个新窗口以在新窗口中绘制包含图像数组的画布时，我调用此函数。
问题：
1-Internet Explorer 9：绘制画布，但它没有绘制图像（因为我在画布样式中设置的边框出现了）。
2-当IE尝试获取图像时，出现此错误
SCRIPT5022: Exception thrown and not caught
index.html, line 1 character 1
3-歌剧12：它没有显示画布。
注意：
1-此功能适用于Firefox，Google Chrome和Safari。
2-我确定Internet Explorer不在兼容性视图（F12）中，也不是Quirks模式（这是标准）。
有什么帮助吗？
嗯，有趣。我想我遇到了类似的问题，我将标记到这个堆栈上。
加载页面后，将调用一个函数以在已创建的画布元素中加载图像 （.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;
}
如果您在页面加载后调用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>')
<!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 元素。
希望这对你有帮助
相关文章：
- 如何使该数据在所有元素中加载
- 使用javascript在Flash中加载外部图像
- HTML5在画布中加载较小的图像并保存实际大小的图像
- 如何在运行时在angular 2中加载外部js脚本
- 在IE中加载Firebug Lite时出现问题
- 有没有办法在tinymceiframe中加载一个外部javascript文件
- 未能在Laravel中加载资源
- Android在webview中加载带有javascript的html文件，得到Uncaught ReferenceEr
- 什么更好?使用iframe或jQuery之类的东西在外部网站中加载HTML文件
- 如何在WordPress的头中加载自定义jQuery
- 无法在obj+mtl文件中加载纹理
- 当库在页脚中加载时，基于PHP条件调用Javascript
- 点击href在谷歌地图中加载位置
- Sails.js:我可以将一些服务/模型打包为npm并在Sails.jss应用程序中加载npm吗
- 在以前的文件夹中加载脚本
- 在Javascript中加载JSON文件
- 在iframe中加载url并添加一个类
- 如何在ThreeJs中加载引用的COLLADA文件
- 在ES6中加载SASS变量
- 在foreach中加载所有项后，Knockoutjs组件回调
