...">
Geek Answers Handbook

Upload image to canvas crash in 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 a new window, it contains an array of images.

<b> tasks:

1- Internet explorer 9: draw a canvas, but it didn’t draw images (since the frame that I set in the canvas style appears).

2- when IE tries to get the image, this error appears

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

3- Opera 12: there was no canvas on it.

Note:

1- This feature works great with Firefox, google chrome and safari.

2- I'm sure Internet Explorer is not in compatibility mode (F12), not Quirks mode (these are standards).

any help?

+4
source share
3 answers
 <!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>

link: www.williammalone.com

since IE does not know what the canvas tag means, and if we used this in our markup, IE would serve us as an error. Instead, we create a canvas element in JavaScript.

hope this helps you

0
source

HM interesting. I think I have a similar problem, I just mark it on this stack.

After loading my page, the function for loading the image (.png) in the already created canvas element is called. Half the time in IE this image does not load. I have to click update, and eventually it will appear. In firefox and chrome, it works on the first try. Sometimes it works with the first attempt in IE, but this irregularity kills me ....

 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; }
+2
source

If you call the draw function after the page loads, you will have to replace document.write(...) , because it will create a new page, and IE will not end the image loading handler (unlike at least 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>')
+1
source

More articles:


All Articles