javascript - “Aw Snap” error when loading large image in chrome - Stack Overflow

admin管理员组

文章数量:1244223

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-positing, --blacklist-webgl, --disable-accelerated-positing, --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);
    }
}

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-positing, --blacklist-webgl, --disable-accelerated-positing, --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);
    }
}

• javascript
• html
• image
• google-chrome
• canvas

Share Improve this question Follow edited Apr 25, 2017 at 21:54 snorkpete 14.6k33 gold badges4242 silver badges5757 bronze badges asked May 19, 2015 at 8:09 DerinDerin 1,23011 gold badge1515 silver badges2525 bronze badges 4

• 1 Have you tried going to Chromes Settings -> Advanced Options -> Privacy and uncheck "Prefetch resources to load pages more quickly"? – Markai Commented May 19, 2015 at 8:22
• 1 Voting to close as "too broad", we can really only guess here. I would suggest reporting this to crbug. as a bug. – user1693593 Commented May 19, 2015 at 10:46
• 1 As K3N says, we can only guess why your code fails under heavy load (probably because the load is too heavy!). I'd suggest refactoring your app to use images closer to the display size instead of being over-sized. – markE Commented May 19, 2015 at 16:08
• 1 It's hard to say since the question is inplete due to not having the test image. Without this, my GUESS is usually the issue is caused using a base64 URI rather than a url pointing to a file/blob. Chrome has a URI size limit. If this is the case, see creating a temporary url which points to a ram object created from a blob via a base64 string: stackoverflow./questions/16245767/… – Radio Commented May 28, 2015 at 22:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

"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 mand 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 puter (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.

You can debug "Aw Snap" errors enabling Chrome's logging.

To enable, launch Chrome using these mand line flags:

--enable-logging --v=1

And open the Chrome's user data directory to find the file.

Go to the property of google chrome shortcut add --no-sandbox to the end of the target field then click apply

本文标签： javascript“Aw Snap” error when loading large image in chromeStack Overflow