移动应用程序加载图像后“由于内存不足而无法加载之前的操作”？

Question

我有一个简单的移动应用程序。它首先提示用户选择一个图像，然后通过以下代码在本地加载并显示在画布上：

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);
    });
}}

在我的网络浏览器和手机上，图像已正确加载并显示在画布中，但是我从使用 Google Chrome 在 Razr Maxx HD 上运行它的用户那里听说，他们会收到“错误：无法加载由于内存不足，之前的操作。” 我怀疑这个问题不能通过首先读取图像然后在显示之前缩放它来解决，因为即使没有显示完整的图像也已经加载到内存中。有没有办法在不先加载整个图像的情况下将图像的缩放版本加载到内存中？知道是什么导致了这个问题，因为我能够在我的 Galaxy S3 上以 chrome 加载大量图像，并且 Galaxy S3 的 RAM 量与 Razr Maxx HD 相同？

Answer 1

有多少可用内存可能取决于用户正在运行哪些应用程序。

一种解决方案是让应用程序请求具有一定宽度的图像，并且服务器可以返回缩放的图像，这应该减少内存需求。