填充背景颜色，然后覆盖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();
}

谢谢！

Answer 1

ctx.globalCompositeOperation =＆＃34;乘以＆＃34;

您可以使用复合方法并避免失去动态范围，因为 frnt 的答案可以做到，0.6处的alpha会显着降低与原始蒙版的对比度。

有许多混合选项，但对于您不希望通过白色显示并且只想添加黑暗的图像，请使用混合模式＆＃34;乘以＆＃34;这种方法可以为您提供最佳对比度。

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通道并且只使用了canvas 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值之外，还要进行混合，混合等。准备就绪时，通过计算结果的平方根将值转换回对数表示。

此视频将更详细地解释Computer Color is Broken

Answer 2

尝试通过以rgba格式定义fillRect（）和颜色，如下所示，

<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);