JS将获取到的RGB转换为HSL

Question

RGB的数值已经获取到了，但是控制台并没有任何数据。具体应该在哪里调用并输出（感觉可能是这里出了问题）。代码是百度的加上了一些自己的修改，会有些乱。求助！

var reader = new FileReader();
reader.readAsDataURL(img);

reader.onload = function(e){ // reader onload start

var image = new Image();
image.src = e.target.result;

image.onload = function(){ // image onload start

var img_width = this.width;
var img_height = this.height;

// 设置画布尺寸
canvas.width = img_width;
canvas.height = img_height;

// 将图片按像素写入画布
context.drawImage(this, 0, 0, img_width, img_height);

// 读取图片像素信息
var imageData = context.getImageData(0, 0, img_width, img_height);

var arrbox = [],
length = imageData.data.length;

// 生成box-shadow
for(var i=0; i<length; i++){

if(i%4 === 0){ // 每四个元素为一个像素数据 r,g,b

var x = i/4%img_width + 1; // 横坐标
var y = Math.floor(i/4/img_width) + 1; // 纵坐标

var hsl = rgbToHsl ( imageData.data[i] , imageData.data[i+1] , imageData.data[i+2]);

arrbox.push(x + 'px ' + y + 'px'+hsl);
}
console.log(hsl);
}

//将rgb转换为hsl
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;

if (max == min){
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}

Answer 1

for(var i=0; i<length; i++){
if(imageData.data[i+3]==255){
var hsl = rgbToHsl(imageData.data[i], imageData.data[i+1], imageData.data[i+2]); //调用函数
arrbox.push(hsl); //输出
}
}