Javascript 如何减少移动浏览器中画布的内存使用

我正在尝试在我们的项目中实现一个功能，当按下移动浏览器中的“捕获”按钮时，它会触发移动摄像头，它会将捕获的图像作为画布附加到html页面，但如果捕获2个以上的图像，浏览器会自动重新启动并显示内存不足警告。请告诉我有没有办法优化画布尺寸

注: 我只在手机chrome上测试过

我在下面附上示例代码

html代码：

<input type="file"  id="camera" accept="image/*" capture> 
<div id="MediaOutput"></div>

javascript:

    var storedMediaList=[];
    var mobile_picture = document.querySelector("#camera");
    mobile_picture.onchange = function () {
      var file = mobile_picture.files[0];
      storedMediaList.push({id:(Math.floor(Math.random()*90000)+10000),data:file});
      drawImage();
    };

    function drawImage()
    {
          $(".rc").remove().empty();
          $("#MediaOutput").html("");
          $("#MediaOutput").html("<div class='mediaWrapper'></div>");
          storedMediaList.forEach(function(row,index,array)
          {

            $(".mediaWrapper").append("<div style='float:left;' class='ir' id='c"+row.id+"' class='pic'><div media-id="+row.id+" class='close-image' id='close-image' style='width:24px;background:url(images/close.png) no-repeat;height:25px;cursor:pointer;'></div><canvas id='cv"+row.id+"'></canvas> </div>");


            var reader = new FileReader();

            reader.onload = function (e) {
              var dataURL = e.target.result,
              c = document.querySelector("#cv"+row.id),
              ctx = c.getContext('2d'),
              img = new Image();

              img.onload = function() {
                c.width = img.width;
                c.height = img.height;
                ctx.drawImage(img, 0, 0);
              };

              img.src = dataURL;
           };

           reader.readAsDataURL(row.data);
       });


       function resizeImage(img, percentage) {
            var coeff = percentage/100,
            width = $(img).width(),
            height = $(img).height();

            return {"width": width*coeff, "height": height*coeff}           
       }
       $('.ir canvas').each(function(){

        var newDimensions = resizeImage( this, 70);
        this.style.width = newDimensions.width + "px";
        this.style.height = newDimensions.height + "px";
      });


      var width = 0;
      $('#MediaOutput .mediaWrapper div').each(function() {
       width += $(this).outerWidth( true );
      });
      $('#MediaOutput .mediaWrapper').css('width', width + "px");
   }

var-storedMediaList=[]；
var mobile_picture=document.querySelector（“摄像头”）；
mobile_picture.onchange=函数（）{
var file=mobile_picture.files[0]；
storedmedilist.push（{id:（Math.floor（Math.random（）*90000）+10000），数据：file}）；
drawImage（）；
};
函数drawImage（）
{
$（“.rc”）.remove（）.empty（）；
$（“#MediaOutput”）.html（“”）；
$（“#MediaOutput”）.html（“”）；
forEach（函数（行、索引、数组）
{
$（“.mediaWrapper”）。追加（“”）；
var reader=new FileReader（）；
reader.onload=函数（e）{
var dataURL=e.target.result，
c=document.querySelector（#cv“+row.id），
ctx=c.getContext（'2d'），
img=新图像（）；
img.onload=函数（）{
c、 宽度=img.width；
c、 高度=img.高度；
ctx.drawImage（img，0,0）；
};
img.src=数据URL；
};
reader.readAsDataURL（row.data）；
});
函数大小图像（img，百分比）{
var系数=百分比/100，
宽度=$（img）.width（），
高度=$（img）.height（）；
返回{“宽度”：宽度*coeff，“高度”：高度*coeff}
}
$（'.ir画布'）。每个（函数（）{
var newDimensions=resizeImage（这是70）；
this.style.width=newDimensions.width+“px”；
this.style.height=newDimensions.height+“px”；
});
var宽度=0；
$（'#MediaOutput.mediaWrapper div'）。每个（函数（）{
宽度+=$（此）.outerWidth（真）；
});
$（'#MediaOutput.mediawapper'）.css（'width'，width+“px”）；
}

---

提前谢谢

我注意到一件事：当你改变

img=newimage（）到
var img=new Image（）
，您将限制
img
变量的范围，以便更快地清理它。我认为这也适用于其他一些变量。@GolezTrol，谢谢你的建议：）。但这会造成巨大的内存问题吗？只是问一下，有没有理由拍摄多张图像？你不能只存储一张图像，它将被新的
相机照片所取代。我不知道，但它值得测试。一般来说，图像很大，占用大量内存。jpg图像是经过压缩的，但在内存中它被视为位图图像，并且会消耗更多的内存（每像素最多4个字节！），因此它肯定会有一些帮助。对于5MP图像，所需的内存是5M*3=15M，然后可能会加倍或三倍，因此，30-45M/图像。然后，对于2张60-90M的图像。太多了。尝试以较低的分辨率捕获。例如720像素宽。它们将在2160p屏幕上显示良好。我们的眼睛可能不会注意到这个小故障。与960*720图像一样，内存使用量为2.7MB，即使乘以3，仍保持在8.1MB。这样，5个图像应该消耗40多MB的空间，我认为应该分配这些空间。您还可以考虑以全分辨率捕获，然后调整大小以仅用于显示