使用Javascript和HTML Canvas创建一个类似于Photoshop的拾色器

Question

我完全不熟悉计算机图形学,我需要创建一个颜色选择器作为嵌入HTML页面的JavaScript工具.

首先,看一下Photoshop的一个,我认为RGB调色板是一个三维矩阵.我的第一次尝试涉及:

<script type="text/javascript">
        var rgCanvas = document.createElement('canvas');
        rgCanvas.width = 256;
        rgCanvas.height = 256;
        rgCanvas.style.border = '3px solid black';
        for (g = 0; g < 256; g++){
            for (r = 0; r < 256; r++){
                var context = rgCanvas.getContext('2d');
                context.beginPath();
                context.moveTo(r,g);
                context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)';
                context.lineTo(r+1,g+1);
                context.stroke();
                context.closePath();
            }
        }

        var bCanvas = document.createElement('canvas');
        bCanvas.width = 20;
        bCanvas.height = 256;
        bCanvas.style.border = '3px solid black';       
        for (b = 0; b < 256; b++){
            var context = bCanvas.getContext('2d');
            context.beginPath();
            context.moveTo(0,b);
            context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')';
            context.lineTo(20, b);
            context.stroke();
            context.closePath();
        }

        document.body.appendChild(rgCanvas);
        document.body.appendChild(bCanvas);
    </script>

这会产生类似的结果

我的想法是,这与我在Photoshop和网络上看到的相比,过于线性.我想知道这样的选择器中颜色映射背后的逻辑:

我真的不需要algorythms本身,我主要是试图理解逻辑.

谢谢

Answer 1

我曾经实现了一个基于画布的颜色选择器.我这样做是因为我在网上找到的大多数颜色选择器都使用了太多的静态图像,我不想引起额外的请求.

颜色生成基于我找到的10K javascript条目.我只是修复了一些错误并对代码进行了一些重构.

您所要做的就是<input type="color-picker" />在代码中包含一个并PICKER.bind_inputs()在加载DOM之后调用它.

这是我的代码的jsFiddle:

http://jsfiddle.net/mShET/1/

请记住,HTML5规范已经支持颜色选择器表单输入.但目前,只有Opera实现了它.

Answer 2

请参阅此处： http: //jsfiddle.net/maniator/GXuqb/2/

使用ColorPicker

请参阅此处的代码： http: //www.eyecon.ro/colorpicker/