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?
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.
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.