I am trying to load an image from a server.
The image is dynamically created on the server, which then passes the name [including the relative path] to the client for loading into a canvas.
There are 3 layers of canvas, setting the same size of image and loading image to one canvas.
Everything working fine for small images. But for big images, [assuming above 9000 x 7000 px] it throws “Aw Snap” blue screen error. Sometimes it managed to load the image but throw “Aw Snap” error by moving the mouse over the canvas, moving scroll bars or drawing a line over it.
I increased --disk-cache-size but didn't help.
Even Setting these values didn't help [ --disable-accelerated-2d-canvas, --blacklist-accelerated-compositing, --blacklist-webgl, --disable-accelerated-compositing, --disable-accelerated-layers]
Tested with IE and Safari - working fine but some delays.
Post your thoughts and hints. Any help is appreciated.
Here is my code
function LoadImage(imageUrl) {
try {
var image_View = document.getElementById("imageView");
var image_Temp = document.getElementById("imageTemp");
var image_Tempt = document.getElementById("imageTempt");
var ctx = image_View.getContext("2d");
var img = new Image();
img.onerror = function() {
alert('The image could not be loaded.');
}
img.onload = function() {
image_View.width = img.width;
image_View.height = img.height;
image_Temp.width = img.width;
image_Temp.height = img.height;
image_Tempt.width = img.width;
image_Tempt.height = img.height;
ctx.clearRect(0, 0, image_View.width, image_View.height);
ctx.drawImage(img, 1, 1, img.width, img.height);
}
img.src = imageUrl;
}
catch (err) {
alert(err.message);
}
}
