CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Moussawi7
Moussawi7

Reputation: 13267

Canvas drawImage Crash on large images

I am creating a mobile app., where the user can choose a picture from mobile then I blur it.... The problem is that when the user choose a large picture(More than 2 MB), the app. crash.

JS Code:

convert_local_image_base64: function(url, callback) {
    var canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d'),
            img = new Image;
    img.crossOrigin = 'anonymous';
    img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');
        callback.call(this, dataURL);
        canvas = null;
    };
    img.src = url;
},

So does there are another way to achieve similar operation?!.

Upvotes: 5

Views: 4058

Answers (2)

ejectamenta
ejectamenta

Reputation: 1087

There seems to be a size limit with the canvas drawImage function on android devices. There is a 3 mega pixels limit but the limit is for the size of the image being used in the drawImage function and not a limit on canvas size, i.e. cropping/shrinking the size of the drawn image has no affect.

ctx.drawImage(imagebiggerthan3mp, 100, 100, 63, 63, 50, 50, 50, 50); // still Aw Snap! crashes on android!

Upvotes: 1

mg_dev
mg_dev

Reputation: 1403

ON PC: -
I tried multiple large sized images (more than 2 MB) to draw on a canvas. I also tried to get its dataURL and redraw it on different canvas. Every thing worked fine for me. (Tried on IE11, Chrome and Firefox.)

Please make sure you not messing with Cross-origin resource sharing (CORS).

Also I found some posts here on stackoverflow related to resolutions on canvas.

Maximum size of a <canvas> element

Is there a max size for images being loaded onto canvas on iPhone?

EDITED: ON Mobile devices-
Here is the restrictions for the canvas for mobile devices:-

The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.

So for example - if you want to support Apple’s older hardware, the size of your canvas cannot exceed 2048×1464.

Hope these resources will help you to pull you out.

Upvotes: 4

Related Questions