“Aw Snap” error when loading large image in chrome

I am trying to load an image from server location.

The image is dynamically created in server and passing the name [including the relative path] to client and 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 mouse over the canvas, moving scroll bars or drawing 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);
    }
}


Source: html5

Leave a Reply