将获取到的RGB转换为HSL

RGB的数值已经获取到了，但是在转换hsl的时候总是undefined。具体应该在哪里调用并输出（感觉可能是这里出了问题）。代码是百度的加上了一些自己的修改，会有些乱。求助！

  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 r=imageData.data[i];
                                var g=imageData.data[i+1];
                                var b=imageData.data[i+2]；
                                arrbox.push(x + 'px ' + y + 'px rgb(' + 'r'+'g'+'b' + ')');//获取所有的rgb颜色
                            }

                        }

                        //将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];
                        }

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); //输出
}
}