动态生成了多个canvas,每个canvas上绘制的是不同的图片,然后对每个canvas进行相同的操作,得到的结果应该是不同的,但是我算完之后他的每个canvas的结果都是最后一个canvas得到的结果。
怎么做可以得到每一个canvas的结果。
var arrboxG=[];
for (n = 0; n<imgSrc.length; n++){
var image = new Image();
imgs[n]=image;
image.src = imgSrc[n];
image.onload = function () { //为异步函数,所以将创建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;
//要对canvas进行的操作
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);
}
}
}
}
}
})