“Aw Snap” error when loading large image in chrome

Question

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);
    }
}

Answer 1

"Aw Snap" means that the OS killed the Chrome process for this tab. This happens when your OS thinks that Chrome did something wrong (like when it allocates too much memory, memory corruption, outdated shared libraries after a system patch).

It's possible that Chrome needs too much memory to display such huge images. The workaround would be to cut the images into pieces ("tiling") and just display those tiles which are visible on the screen.

To find out for sure, you can run Chrome from the command line. Sometimes, it prints more descriptive error messages on the console when part of it crashes.

You should also try to apply the latest (security) patches to your OS, get the latest Chrome and reboot to make sure it's not a glitch. On my computer (16GB RAM, 1GB Video RAM), I can open a 19'000x19'000 PNG image without an error, it just takes ~20 seconds for the frame to render it.