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?!.

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?!.

• javascript
• html
• html5-canvas

2 Answers 2

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.

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!