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

时间:2015-09-11 13:08:32

标签: javascript html5 canvas optimization html5-canvas

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

注意: 我只在移动镀铬中测试过。

我正在附上下面的示例代码

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

先谢谢!!

0 个答案:

没有答案