html5 canvas memory leak

2.7k views Asked by At

I am developing a camera based SPA. When I'm trying to resize the image it cause to a memory leak.

without executing resize

memory snapshot at beginning

first executing resize

enter image description here.

second executing resize

enter image description here

The memory never go down until I do refresh.

It is strange the same app http://shitu.baidu.com does release the memory. Here is the my resize function.

var useRightPen = function (img, pre_img_wid, pre_img_hei, aft_img_wid, aft_img_hei, callback) {
    var canvas = document.createElement('canvas');
    var ctx=canvas.getContext('2d');
    canvas.setAttribute("height", aft_img_hei);
    canvas.setAttribute("width", aft_img_wid);

    var orientation = 1;
    if (!!(/http/.test(img.src))) {
          //memory keeps the same before the drawimage
        canvas.getContext('2d').drawImage(img, 0, 0, aft_img_wid, aft_img_hei);
         //memory goes up after the draimage
        callback(canvas.toDataURL('image/jpeg'), aft_img_wid, aft_img_hei);
    }
    canvas = null;
}

Appreciate for everyone.

---update--06-11--2015

I make one fildde http://jsfiddle.net/onTheRoad/dc17guba/

The demo will reset the image src after every pick.Memory goes high on its way. enter image description here enter image description here

0

There are 0 answers