年秒 2017-10-11 07:10 采纳率: 0%
浏览 1913

将获取到的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];
                        }
  • 写回答

1条回答 默认 最新

  • 年秒 2017-10-12 09:03
    关注

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

    评论

报告相同问题?

悬赏问题

  • ¥20 怎么在stm32门禁成品上增加记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 解riccati方程组