canvas.getImageData + canvas.putImageData

Question

我经常调用getImageData / putImageData，这会导致我的Chrome进程填满，直到它达到2.5Gb内存时崩溃。

我使用simpleheat.js和a leaflet heat map plugin在画布上显示热图。

基本上，我会随时调用绘图fn来建立一个＆＃34;热图＆＃34;影响。我每次运行处理的数据（每个getImageData / putImageData）都是4Mb，而以10-20 fps调用。

我想知道如何优化此代码。我对使用画布知之甚少。

这是simpleheat.js的相关代码：

draw: function() {
    ...
    var colored = ctx.getImageData(0, 0, this._width, this._height);
    this._colorize(colored.data, this._grad);
    ctx.putImageData(colored, 0, 0);
},
_colorize: function (pixels, gradient) {
    for (var i = 0, len = pixels.length, j; i < len; i += 4) {
        j = pixels[i + 3] * 4; // get gradient color from opacity value

        if (j) {
            pixels[i] = gradient[j];
            pixels[i + 1] = gradient[j + 1];
            pixels[i + 2] = gradient[j + 2];
        }
    }
}

我尝试过减少DOM访问权限（在另一个问题中建议）

var colored = ctx.getImageData(0, 0, this._width, this._height);
var coloredData = colored.data;
this._colorize(coloredData, this._grad);
colored.data = coloredData;
ctx.putImageData(colored, 0, 0);

  

我认为问题在于浏览器没有正确释放4Mb的数据，因为如果我保留页面一段时间内存将会   最终放弃

我尝试过一些愚蠢的尝试来帮助GC发布数据阵列（colored.data = null或undefined）