用背景颜色填充，然后覆盖一个PNG图像

Question

我正在尝试让画布具有背景颜色，然后在其上方覆盖PNG图像。

这是PNG纹理：

 ‏

例如，如果backgroundColor = #D95753（明亮的红色），画布填充级别将如下所示：

1. 设置背景颜色

2. - 在背景颜色上方覆盖png

这是我的代码，但它没有起作用。你看不到背景颜色，只有png图像。

var background = new Image();
background.src = "http://i.stack.imgur.com/LF1P0.png";
background.height = y; // set it before
background.width = x; // set it before

ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, background.width, background.height);

background.onload = function() {
    ctx.drawImage(background,0,0, background.width, background.height);
    memeEverything();
}

谢谢！

- Itay Ganor

Answer 1

ctx.globalCompositeOperation = "multiply"

你可以使用合成方法，避免像frnt的回答一样失去动态范围。alpha值为0.6将显著降低原始掩码的对比度。

有许多混合选项，但如果您不想显示白色并且只想添加暗度，则使用混合模式"multiply"。这种方法将给您最好的对比度。

ctx.fillStyle = ???  // the background colour you want
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // fill canvas with colour. This is now the destination
// Destination pixels get multiplied by source pixels 
// nC = dC  * (sC / 255);  ( seperate for each channel RGB. no effect on alpha )
// where nC is the new colour, dC is destination colour and, sC is source colour;
// White pixels make no change, all others reduce the the colour
ctx.globalCompositeOperation = "multiply"; 
// draw the image over the top.
ctx.drawImage(img, 0, 0, canvas.width, cvtx.canvas.height);
ctx.globalCompositeOperation = "source-over";  // reset to default

最佳质量

有一种更好的方法，但这需要获取每个像素的像素数据，并在乘法之前对每个像素进行光子计数。这将更接近原始掩模。公式是nC = Math.sqrt(dC * dC * (sC * sC / (255*255)))，其中nC是新颜色，dC是目标颜色，sC是源颜色。应用于每个RGB通道，忽略alpha。

// r,g,b are the background colour
// img is a loaded image to convert
var r = ?, g = ?, b = ?;
// create canvas and context for image
var c = document.createElement("canvas");
c.width = img.width;
c.height = img.height;
var ctx = c.getContext("2d");
// draw image onto the canvas
ctx.drawImage(img, 0,0);
// get the pixel data
var data = ctx.getImageData(0,0,c.width,c.height);
var d = data.data;
// Convert background colour to photon count and normalise 
r = r * r / (255 * 255);
g = g * g / (255 * 255);
b = b * b / (255 * 255);
var i = 0, len = d.length;;
// for each pixel do the multiply using photon counts
while(i < len){
    d[i] = Math.sqrt(d[i] * d[i++] * r);
    d[i] = Math.sqrt(d[i] * d[i++] * g);
    d[i] = Math.sqrt(d[i] * d[i++] * b);
    i ++;
}
// put the image data back onto the canvas.
ctx.putImageData(data,0,0);

通过 Alpha 合成。

如果乘法不是您想要的效果，您还可以使用 Alpha 合成。有两种方法，简单和光子计数法。请注意，这两种方法假定背景颜色的 Alpha 值为 255，并且将仅适用于该值。

简单的方法是获取像素的 Alpha 值。如果您设置了 Alpha 通道并只使用画布 source-over（默认）混合函数，则可以这样完成。

// assume you have got the pixel data etc.. see above snipets
var amount = ?; // the mixing amount
var i = 0, len = d.length;;
// for each pixel do the alpha blend
while(i < len){
    var rr = d[i];   // get source channels
    var gg = d[i + 1]; 
    var bb = d[i + 2]; 
    var alpha = (rr + gg + bb) / ( 3 * 255); // calculate alpha by finding the mean 
    // alpha is inverted  but also need to clamp alpha as floating point may give a value too high so clamp and invert
    alpha = Math.min(1, 1 - alpha);
    alpha *= amount;   // set the mix amount
    var aInv = 1 - alpha; // invert again
    // each channel is the sum of background and image colour time their respective mix amounts
    d[i++] = aInv * r + alpha * rr;  
    d[i++] = aInv * g + alpha * gg;
    d[i++] = aInv * b + alpha * bb;
    d[i++] = 255;  // in this case alpha is always 255
}
// put the image data back onto the canvas.
ctx.putImageData(data,0,0);

正确的方式（高质量专业混音的做法）如下：

// assume you have got the pixel data etc.. see above snipets
var amount = ?; // the mixing amount
// Convert background colour to photon count and normalise 
r = r * r / (255 * 255);
g = g * g / (255 * 255);
b = b * b / (255 * 255);
var i = 0, len = d.length;;
// for each pixel do the alpha blend using photon counts
while(i < len){
    var rr = d[i];   // get source channels
    var gg = d[i + 1]; 
    var bb = d[i + 2]; 
    rr *= rr;
    gg *= gg;
    bb *= bb;
    var alpha = (rr * + gg + bb) / ( 3 * 255 * 255); // calculate alpha by finding the mean in photon space
    // alpha is inverted but also need to clamp alpha as floating point may give a value too high so clamp and invert
    alpha = Math.min(1, 1 - alpha);
    alpha *= amount;   // set the mix amount
    var aInv = 1 - alpha; // invert again
    // each channel is the sum of background and image colour time their respective mix amounts
    d[i++] = Math.sqrt(aInv * r + alpha * rr);  
    d[i++] = Math.sqrt(aInv * g + alpha * gg);
    d[i++] = Math.sqrt(aInv * b + alpha * bb);
    d[i++] = 255;  // in this case alpha is always 255
}
// put the image data back onto the canvas.
ctx.putImageData(data,0,0);

为什么使用光子计数颜色模型。

我使用的颜色模型是基于设备显示器发射的光子数量。每个颜色通道都有一个0到255的值，但这些值不匹配监视器的实际输出，也不代表相机（输入设备）捕获的光子数量。它们是光子通量的平方根。如果您通过简单的线性平均混合颜色，而没有考虑这一点，那么得到的颜色将比应该更暗（特别是当图像具有高色相对比度时），且对比度曲线将被扩展。当您直接操作像素以获得最佳结果时，请始终平方r、g、b值，进行混合、混合等操作。当您准备好时，请通过计算结果的平方根将值转换回其对数表示。

此视频将更详细地解释：计算机颜色出现问题

- Blindman67

Answer 2

尝试按照以下方式定义fillRect()和使用rgba格式的颜色：

定义fillRect()并使用rgba格式的颜色，如下所示：

<canvas id="canvs" width="500" height="500">
<img src="http://i.stack.imgur.com/LF1P0.png" id="img">
</canvas>

function onld(){
var can = document.getElementById('canvs');
var img = document.getElementById('img');
var ctx = can.getContext('2d');
ctx.fillStyle = 'rgba(217, 87, 83, 1)';
ctx.fillRect(10,10,500,500);
ctx.globalAlpha=0.6;
ctx.drawImage(img,10,10);
}
window.addEventListener('load',onld);

- frnt

---

在这里，我们使用fillRect将背景填充为明亮的红色，该颜色从十六进制转换为rgba，以便我们可以降低颜色的不透明度。您可以尝试将其从0.8更改为1。为了使您的图像与背景颜色融合，它需要是透明的。 - frnt

按照 @Kaiido 的说法，在代码中添加以下内容：ctx.globalAlpha=0.6; - frnt