使用 Javascript 和 HTML Canvas 创建一个类似于 Photoshop 的颜色选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8729040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a Color Picker, similar to Photoshop's, using Javascript and HTML Canvas
提问by André Al?ada Padez
I am not at all versed in Computer Graphics and am in need of creating a color picker as a javascript tool to embed in an HTML page.
我一点也不精通计算机图形学，需要创建一个颜色选择器作为嵌入 HTML 页面的 javascript 工具。
First, and looking at Photoshop's one, i thought of the RGB palette as a three-dimensional matrix. My first attempt envolved:
首先，看看 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>
this results in something like
这会导致类似
My thought is this is too linear, comparing to the ones i see in Photoshop and on the web.
I would like to know the logic behind the color mapping in a picker like this:
我的想法是这太线性了，与我在 Photoshop 和网络上看到的相比。我想知道这样的选择器中颜色映射背后的逻辑：
I don't really need the algorythms itself, i'm mainly trying to understand the logic.
我真的不需要算法本身，我主要是想了解逻辑。
Thanks
谢谢
回答by Cesar Canassa
I implemented a canvas based color picker once. I did it because most color picker that I found on the web used too many static images and I didn't want to cause extra requests.
我曾经实现了一个基于画布的颜色选择器。我这样做是因为我在网上找到的大多数颜色选择器都使用了太多的静态图像，而且我不想引起额外的请求。
The color generation is based on a 10K javascript entrythat I found. I Just fixed some bugs and did some refactoring on the code.
颜色生成基于我发现的10K javascript 条目。我刚刚修复了一些错误并对代码进行了一些重构。
All you have to do is to include a <input type="color-picker" />in your code and call the PICKER.bind_inputs()after the DOM is loaded.
您所要做的就是<input type="color-picker" />在代码中包含 a并PICKER.bind_inputs()在加载 DOM 后调用。
Here is a jsFiddle with my code:
这是一个带有我的代码的 jsFiddle：
Bear in mind that The HTML5 specification already supportsa color picker form input. But currently, only Opera has implemented it.
请记住，HTML5 规范已经支持颜色选择器表单输入。但目前，只有 Opera 实现了它。
回答by Gareth
To answer your question about the logic behind the Photoshop picker: it looks like the colour picker is based on the HSB colour space. The hue (H) is picked by the vertical slider on the right, the saturation (S) is picked by the horizontal axis of the colour picker area, and the brightness(B) is picked by the vertical axis of the colour picker area.
回答您关于 Photoshop 选择器背后逻辑的问题：看起来颜色选择器是基于 HSB 颜色空间的。色调（H）由右侧的垂直滑块选择，饱和度（S）由颜色选择器区域的水平轴选择，亮度（B）由颜色选择器区域的垂直轴选择。
To quote from Wikipedia:
引用维基百科：
The original purpose of HSL and HSV and similar models, and their most common current application, is in color selection tools. At their simplest, some such color pickers provide three sliders, one for each attribute. Most, however, show a two-dimensional slice through the model, along with a slider controlling which particular slice is shown.
HSL 和 HSV 以及类似模型的最初用途以及它们目前最常见的应用是颜色选择工具。最简单的是，一些这样的颜色选择器提供了三个滑块，每个属性一个。然而，大多数显示模型的二维切片，以及控制显示哪个特定切片的滑块。
回答by Naftali aka Neal
See Here: http://jsfiddle.net/maniator/GXuqb/2/
见这里：http: //jsfiddle.net/maniator/GXuqb/2/
Using ColorPicker
使用 ColorPicker
See the code for it here: http://www.eyecon.ro/colorpicker/
在此处查看代码：http: //www.eyecon.ro/colorpicker/
回答by SoftMoon-WebWare
I created a JavaScript project, "MasterColorPicker", that has 4 different canvas based color-pickers. It took me several months of both reading Wikipedia articles on "Color Wheel" as well as "HSB" and "HSL" and "RGB", and also working with the algorithms directly as I built each color-picker from scratch. One thing I focused on in this project is bringing the LOGIC of these color-spaces into an easy-to-understand and use format. My hope is that just using the project will help you to understand each color-space. As far as mapping from one space to another, for example, the relationship between RGB and HSL, you must really expand your 3D imagination to begin that. That is where I hope this project can help. But really, don't bang your head against the wall for years trying to figure out these algorithms. Besides Wikipedia, see:
我创建了一个 JavaScript 项目“MasterColorPicker”，它有 4 个不同的基于画布的颜色选择器。我花了几个月的时间阅读维基百科关于“色轮”以及“HSB”和“HSL”和“RGB”的文章，并在我从头开始构建每个颜色选择器时直接使用算法。我在这个项目中关注的一件事是将这些颜色空间的逻辑转化为一种易于理解和使用的格式。我希望仅使用该项目就可以帮助您了解每个颜色空间。至于从一个空间映射到另一个空间，例如 RGB 和 HSL 之间的关系，您必须真正扩展您的 3D 想象力才能开始。这就是我希望这个项目可以提供帮助的地方。但真的，不要 多年来，不要一直在努力找出这些算法。除了维基百科，请参见：
http://www.easyrgb.com/index.php?X=MATH
http://www.easyrgb.com/index.php?X=MATH
All the formulas you can digest. EXCEPT: Wikipedia talks about "Chroma" in one of their articles and says not to confuse it with "saturation". My MasterColorPicker project adds another color-space, hue-chroma-gray (HCG), and the source code for this project documents the formulas for converting between HCG and RGB. With HCG, you can find the organization of the "Web-Safe" colors, and the "RainbowMeistro Color-Picker" in the project will give you a clear visualization of that color-space. You can try the project and download the JavaScript/HTML files to use it on your own system (open-source and free) from here:
你能消化的所有公式。除了：维基百科在他们的一篇文章中谈到了“色度”，并说不要将它与“饱和度”混淆。我的 MasterColorPicker 项目添加了另一个颜色空间，即色相-色度-灰度 (HCG)，该项目的源代码记录了在 HCG 和 RGB 之间转换的公式。使用 HCG，您可以找到“Web-Safe”颜色的组织方式，项目中的“RainbowMeistro Color-Picker”将为您提供该颜色空间的清晰可视化。您可以从这里尝试该项目并下载 JavaScript/HTML 文件以在您自己的系统（开源和免费）上使用它：
http://softmoon-webware.com/MasterColorPicker_instructions.php
http://softmoon-webware.com/MasterColorPicker_instructions.php
Peace!
和平！
