HTML5画布处理中Web工作程序内存不足

在主线程中：我通过getImageData方法获得源图像数组。它是一个uint8ClampedArray来记录我的图像数据。

以下是我在web worker中的代码：（这个代码会给我一个高分辨率的图像，但操作的结果太大了）

 self.addEventListener('message', function(e){
    var scale = e.data['scale'], cvWidth = e.data['width'], cvHeight = e.data['height'], sBufferData = e.data['sBuffer'].data;
    var sq = scale*scale,   //pixel of source within target
        sw = cvWidth, sh = cvHeight,
        sx = 0, sy = 0, sIdx = 0,
        tw = Math.floor(sw * scale), th = Math.floor(sh * scale),
        tx = 0, ty = 0, tIdx = 0,
        TX = 0, TY = 0, yIdx = 0,
        w = 0, nw = 0, wx = 0, nwx = 0, wy = 0, nwy = 0,
        sR = 0, sG = 0, sB = 0,
        crossX = false, crossY = false,
        tBuffer = new Float32Array(3 * sw * sh);
    for( sy=0; sy<sh; sy++ ) {
        ty = sy * scale; TY = 0 | ty; yIdx = 3 * TY * tw; crossY = (TY != (0 | ty + scale));
        if(crossY) { wy = (TY + 1 - ty); nwy = (ty + scale - TY - 1); }
        for( sx=0; sx<sw; sx++, sIdx+=4 ) {
            tx = sx * scale; TX = 0 | tx; tIdx = yIdx + TX * 3; crossX = (TX != (0 | tx + scale));
            if(crossX) { wx = (TX + 1 - tx); nwx = (tx + scale - TX - 1); }
            sR = sBufferData[sIdx+0]; sG = sBufferData[sIdx+1]; sB = sBufferData[sIdx+2];
            if(!crossX && !crossY) {
                tBuffer[tIdx+0] += sR * sq; tBuffer[tIdx+1] += sG * sq; tBuffer[tIdx+2] += sB * sq;
            } else if(crossX && !crossY) {
                w = wx * scale;
                tBuffer[tIdx+0] += sR * w; tBuffer[tIdx+1] += sG * w; tBuffer[tIdx+2] += sB * w;
                nw = nwx * scale
                tBuffer[tIdx+3] += sR * nw; tBuffer[tIdx+4] += sG * nw; tBuffer[tIdx+5] += sB * nw;
            } else if(crossY && !crossX) {
                w = wy * scale;
                tBuffer[tIdx+0] += sR * w; tBuffer[tIdx+1] += sG * w; tBuffer[tIdx+2] += sB * w;
                nw = nwy * scale
                tBuffer[tIdx+3 * tw+0] += sR * nw; tBuffer[tIdx+3 * tw+1] += sG * nw; tBuffer[tIdx+3 * tw+2] += sB * nw;
            } else {
                w = wx * wy;
                tBuffer[tIdx+0] += sR * w; tBuffer[tIdx+1] += sG * w; tBuffer[tIdx+2] += sB * w;
                nw = nwx * wy;  //for TX + 1; TY px
                tBuffer[tIdx+3] += sR * nw; tBuffer[tIdx+4] += sG * nw; tBuffer[tIdx+5] += sB * nw;
                nw = nwy * wx;
                tBuffer[tIdx+3 * tw+0] += sR * nw; tBuffer[tIdx+3 * tw+1] += sG * nw; tBuffer[tIdx+3 * tw+2] += sB * nw;
                nw = nwx * nwy;
                tBuffer[tIdx+3 * tw+3] += sR * nw; tBuffer[tIdx+3 * tw+4] += sG * nw; tBuffer[tIdx+3 * tw+5] += sB * nw;
            }
        }
    }
    var worker2Object = {'tBuffer': tBuffer}; //I guess tBuffer is too Large
        tBuffer = undefined; e = undefined;
    self.postMessage(worker2Object);   //Return to Main Thread
}, false);

当我使用IE或FireFox时，web工作线程中的内存将不足（Chrome很好）。

但是当图像大小小于1MB时，在3个浏览器上工作是很好的。

因此，我怀疑问题在于操作（tBuffer）的结果过大。有人能帮我解决这个问题吗？谢谢你的帮助。

我需要将big-O（n^2）算法移动到网络工作者，这样它就不会阻止我的主线程执行其他脚本。

现在，我需要在5个web worker线程中缩放5规范图像。下方的程序代码

for( var i in 5 spec image size array ) { //LOOP 5 time and new 5 web workers
   //get imageData of source image
   sourceBuffer = canvas.getContext("2d").getImageData(0, 0, w, h); 
   //new Worker_1 to process spec_1 image and so on
   Worker_1 = new Worker('myWebWorker.js');
   Worker_1.postMessage(sourceBuffer);
   Worker_1.onmessage = function(e){ get e.data }
}