title: Mobile App "unable to load previous operation due to low memory" after loading image?
body: <p>I have a <a href="http://home.comcast.net/~reed.bialousz/StressGame/index2.html" rel="noreferrer">simple mobile app</a>. It starts by prompting the user to select an image which is then loaded locally via the following code and displayed on a canvas:</p>
  
  <pre><code>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);
      });
  }}
  </code></pre>
  
  <p>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?</p>