多個(gè)canvas繪制圖片后對(duì)其進(jìn)行操作，得到的結(jié)果都是最后一個(gè)canvas的內(nèi)容

動(dòng)態(tài)生成了多個(gè)canvas，每個(gè)canvas上繪制的是不同的圖片，然后對(duì)每個(gè)canvas進(jìn)行相同的操作，得到的結(jié)果應(yīng)該是不同的，但是我算完之后他的每個(gè)canvas的結(jié)果都是最后一個(gè)canvas得到的結(jié)果。
怎么做可以得到每一個(gè)canvas的結(jié)果。

var arrboxG=[];
for (n = 0; n<imgSrc.length; n++){
        var image = new Image();
        imgs[n]=image;
        image.src = imgSrc[n];
        image.onload = function () { //為異步函數(shù),所以將創(chuàng)建canvas放在onload中.
            var oDiv=document.createElement('div'),
                    oCan = document.createElement('canvas'),
                    oP=document.createElement("p");
            oDiv.appendChild(oCan);
            oDiv.appendChild(oP);
            $("#div").append(oDiv);
            var context=oCan.getContext("2d");
            //添加圖片
            var imgHeight = this.height;
            var imgWidth = this.width;
            imgWidth=oCan.width;
            imgHeight=oCan.height;
            context.drawImage(this,0,0,imgWidth,imgHeight);
            var imageData =context.getImageData(0, 0,imgWidth,imgHeight);
            var length = imageData.data.length;
            //要對(duì)canvas進(jìn)行的操作
            for (var i = 0; i < length; i++) {
                if (i % 4 === 0) {
                    if (imageData.data[i + 3] == 255) { 
                        var hsl = rgbToHsl(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2]);
                        if (hsl[0] >= 57 && hsl[0] <= 152 && hsl[1] >= 13 && hsl[1] <= 100 && hsl[2] >= 0 && hsl [2] <= 90) {
                            arrboxG.push(hsl);
                        }
                       
                    }
                }
            }
        }
  }）