如何在javascript中乘以两种颜色？

Question

给定参数是两种颜色的r，g，b。

我怎样才能将它们相乘？ （如混合模式 - >在Photoshop中相乘）

示例：

COLOR1：0255255

COLOR2：255,255,0

相乘：0,255,0

Answer 1

基于简单的乘法公式，这里有一个适用于RGB的javascript函数：

function multiply(rgb1, rgb2) {
    var result = [],
        i = 0;
    for( ; i < rgb1.length; i++ ) {
        ​result.push(Math.floor(rgb1[i] * rgb2[i] / 255));
    }
    return result;
}​

使用现代JavaScript：

const multiply = (rgb1, rgb2) => rgb1.map((c, i) => Math.floor(c * rgb2[i] / 255))

这是一个使用您可以使用的背景颜色的小提琴：http://jsfiddle.net/unrLC/

Answer 2

Here's the formula for multiplying colors（以及其他混合模式公式）。

  

公式：结果颜色=（顶部颜色）*（底部颜色）/ 255

您可以在JavaScript中轻松实现此功能。

var newRed = red1 * red2 / 255;
var newGreen = green1 * green2 / 255;
var newBlue = blue1 * blue2 / 255;

Answer 3

您将颜色分量转换为0到1之间的值，然后是简单的乘法。将结果分解回0到255的范围：

0, 255, 255  ->  0, 1, 1
255, 255, 0  ->  1, 1, 0

0*1 = 0, 1*1 = 1, 1*0 = 0

0, 1, 0  ->  0, 255, 0

Answer 4

我想目标是将颜色范围从0增加到255.将它们减少到[0,1]的范围，将它们相乘，然后再次展开它们：

color_new = ( (color_1 / 255) * (color_2 / 255) ) * 255
color_new = color_1 * color_2 / 255