'Mobile App "unable to load previous operation due to low memory" after loading image?

I have a simple mobile app. It starts by prompting the user to select an image which is then loaded locally via the following code and displayed on a canvas:

function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
console.log(evt);
var ctx = document.getElementById("myCanvas").getContext('2d'),
img = new Image(),
f = document.getElementById("uploadbutton").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);

img.src = src;
lastImage = img;
img.onload = function() 
{
    window.requestAnimationFrame(function(){
    var w = window.innerWidth;
    var h = window.innerHeight;
    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(lastImage, 0, 0);
    //url.revokeObjectURL(src);
    });
}}

In my web browser and on my phone, the image is loaded and displayed in a canvas properly, however I have heard from a user who was running it on a Razr Maxx HD with Google Chrome, that they would receive "Error: unable to load previous operation due to low memory." I suspect that this issue cannot be solved by first reading in the image and then scaling it prior to displaying because the full image will have already been loaded into memory even if not displayed. Is there any way to load a scaled version of an image into memory without first loading the entire thing? Any idea what is causing this issue as I am able to load massive images on my Galaxy S3 in chrome and the Galaxy S3 has the same amount of RAM as the Razr Maxx HD?

javascripthtmlweb-applicationshtml5-canvas


Solution 1:[1]

It may depend on which applications the user is running as to how much memory is available.

One solution is to have the application request the image with certain width and the server can return a scaled image, which should reduce memory requirements.

Solution 2:[2]

I have had the same problem on my Samsung Galaxy S4. I have found the solution on my phone and I have had no issues since:

  1. Go to the Settings on your phone.
  2. Select More in the top right task item.
  3. Scroll to Developer Options. - If you don`t have developer options enabled follow steps 1 & 2, Then scroll down to about device and click on it. The phone information should be displayed and you should scroll down till you get to Build Number. The next thing to do is click on Build Number several times... ( Each time you click on it an info bar will be displayed telling you how many clicks are needed for Developer options. When you have clicked BN several times then DO will now be open and we can continue with the above.
  4. If you have clicked into Developer Options successfully then you must scroll down to the apps options near the bottom of D.O menu.
  5. If ( Do not keep activities) is selected then be sure to untick it making sure the box has no tick in it as it will end every app or running operation as soon as it leaves the page, Hence the reason photos wont load up to Facebook etc. If this is done correctly then you should now be able to upload photos.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 James Black
Solution 2 Miki

Related Questions