1

我继承了一个小型 Web 应用程序,该应用程序具有用户可以从下拉列表中选择颜色的功能,然后对图像的一部分进行着色。

着色是通过一个名为Pixastic的 Javascript 库进行的。

Pixastic 将图像加载到画布元素中,使用其Pixastic coloradjust功能处理图像。

就我而言,正在处理的图像是带有黑色/灰色轮廓的透明 PNG。最终结果是只有黑色/灰色轮廓被着色。

但这是棘手的部分。

Pixasticcoloradjust函数不仅仅采用十六进制或 RGB 颜色。它需要一组调整参数来调整红色、绿色和蓝色通道。每个调整值可以是从 -1 到 1 的十进制数。

coloradjust功能基本上是这样工作的:

  • r为红色通道调整值。
  • 多个r* 255 并让结果为redVal
  • 循环遍历图像中的每个像素
  • 添加redVal到像素的红色值(redPixel)
  • 如果redVal + redPixel< 0,则将像素设置为 0
  • 如果redVal + redPixel> 255,则将像素设置为 255
  • 否则,将像素设置为redVal + redPixel *对绿色和蓝色通道执行相同的操作。

如果有帮助,这里是coloradjust函数的实际代码。

我有一个现有颜色和调整值的列表。

我的任务是为应用程序添加一些新颜色,但我完全坚持弄清楚如何计算给定十六进制颜色的 PIxastic 的颜色调整值。

现有的十六进制颜色和调整值之间似乎没有任何相关性,所以恐怕现有的调整值是有人手动计算出来的。

以下是现有系统中的一些示例颜色:

  • #603314
    • 红色调整-0.1
    • 绿色调整-0.5
    • 蓝色调整-0.3
  • #82坏4
    • 红色调整0.2
    • 绿色调整0.4
    • 蓝色调整0.4

鉴于以上所有情况,我怎样才能找出新的十六进制颜色的颜色调整值#cc9e3c

4

1 回答 1

1

我已经尝试创建一些函数来返回红色、绿色和蓝色比例,即描述问题的方式。但是,我的计算与示例都不匹配,所以我猜我不完全理解这个问题。尽管如此...

function redScale(colorInput) {return parseInt(colorInput.substring(1,3),16)/255 * 2 - 1;}
function grnScale(colorInput) {return parseInt(colorInput.substring(3,5),16)/255 * 2 - 1;}
function bluScale(colorInput) {return parseInt(colorInput.substring(5,7),16)/255 * 2 - 1;}

substring 方法从 colorInput 字符串中获取两位十六进制值。在获得两位十六进制字符串后,我使用 parseInt 将其转换为十进制。将它除以 255,得到从 0 到 1 的比例。由于比例从 -1 到 1(长度为 2),你将它乘以 2(得到 0 到 2 的比例),然后减 1,得到 -1 到 1 的比例。 */

var colorInput = "#603314";

rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);
document.write("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS + "<br/><br/>");

colorInput = "#82bad4";

rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);
document.write("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS + "<br/><br/>");

colorInput = "cc9e3c";
rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);

document.write("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS);
于 2013-06-06T01:24:19.820 回答