我有以下功能可以使图像变亮/变暗。
<script>
brightness = function(delta) {
return function (pixels, args) {
var d = pixels.data;
for (var i = 0; i < d.length; i += 4) {
d[i] += delta; // red
d[i + 1] += delta; // green
d[i + 2] += delta; // blue
}
return pixels;
};
};
</script>
只是想尝试一些更有趣的东西，我可以对图像进行自动增强吗？我的意思是只使照片中的某些区域变亮/变暗。例如，我应该如何检测像素是否暗，然后我应该稍微变亮？谢谢。
您要做的是修改图像动态。
因此，对于范围从 0.0 到 1.0 的标准化像素的亮度，您必须决定将应用于每个像素的亮度的变换函数。
您寻求的功能将必须增强较低的亮度（接近 0），并为高亮度（接近 1）保持相同的亮度。
这是一个（典型的）转移函数的例子：
所以你会想要一个 gamma > 1。
例如，你在这里看到，如果输入亮度为 0.2，则输出亮度为 0.45，这是原始值的两倍多。
对于 0.8 的输入，我们有 0.95 的值，增加了 20%。
要仅更改亮度而不更改感知颜色，我看到的最简单的解决方案是使用另一个颜色空间，例如 hsl。
使用 h,s,l，您可以以对人眼有意义的方式表示颜色：
h 是色调：“颜色”，
饱和度是颜色“强度”，
而 l 是……亮度。
所以步骤是：
for each pixel
compute h,s,l of the pixel out of its r,g,b
apply one transform function on luminosity
a good one is : new l = Math.pow(l, 1 / gamma);
compute new (r,g,b) out of (h, s, new l)
write those values.
我做了一个小提琴来说明：
小提琴结果： http: //jsfiddle.net/gamealchemist/yqvmC/embedded/result/
小提琴本身：http: //jsfiddle.net/gamealchemist/yqvmC/
编辑：这是一个修改版本，将图像作为输入，并返回图像。
该参数可以是伽玛值（数字），也可以是您喜欢的变换函数。
我为示例添加了一个 gamma 压缩函数。您可以在结果中看到（向下滚动查看），压缩非常苛刻：所有亮度值都以 ratio*(max-min) 为中心，这使得图像非常可读，但对比度较低。
这是代码：
// pow is the power of the function
// min is min value returned
// max is max value returned.
function gamma(pow, min, max, x) {
return min + Math.pow(x, 1 / pow) * (max - min);
}
// pow is the 'gamma' used for both part of the curves
// min is the minimum value returned / max the max
// center is the luminosity where we stop reducing and start expanding
// ratio states where reduced luminosity should lay between min and max.
function gammaCompress(pow, min, max, center, ratio, x) {
var xr = 0;
if (x < center) {
xr = x / center;
return min + Math.pow(xr, 1 / pow) * (max - min) * ratio;
} else {
xr = (x - center) / (1 - center);
return min + (max - min) * ratio + Math.pow(xr, 1 / pow) * (max - min) * (1 - ratio);
}
}
function getEnligthedImage(sourceImage, transform) {
// if a number, not a bound transform function, was provided,
// assume it's a gamma targetting [0;1]
if (typeof transform != 'function') {
transform = gamma.bind(null, transform, 0, 1);
}
var tgtCv = document.createElement('canvas');
tgtCv.width = sourceImage.width;
tgtCv.height = sourceImage.height;
var context = tgtCv.getContext('2d');
context.drawImage(img, 0, 0);
var imgData = context.getImageData(0, 0, canvasWidth, canvasHeight);
var pix = imgData.data;
var hslValue = { h: 0, s: 0, l: 0 };
var rgbValue = { r: 0, g: 0, b: 0 };
for (var i = 0; i < pix.length; i += 4) {
rgbToHsl(pix[i], pix[i + 1], pix[i + 2], hslValue);
hslValue.l = transform(hslValue.l);
hslToRgb(hslValue.h, hslValue.s, hslValue.l, rgbValue);
pix[i] = rgbValue.r;
pix[i + 1] = rgbValue.g;
pix[i + 2] = rgbValue.b;
}
context.putImageData(imgData, 0, 0);
var newImage = new Image();
newImage.src = tgtCv.toDataURL("image/png");
return newImage;
}
var result = getEnligthedImage(img, 1.6);
var pr = document.createElement('div');
pr.innerHTML = 'example for a gamma 1.6'
document.body.appendChild(pr);
document.body.appendChild(result);
var compressor = gammaCompress.bind(null, 1.4, 0.2, 1.0, 0.5, 0.5);
var compressedResult = getEnligthedImage(img, compressor);
pr = document.createElement('div');
pr.innerHTML = 'example using a gamma compressor. min is 0.2'
document.body.appendChild(pr);
document.body.appendChild(compressedResult);
如果你想对图像做一些其他的事情，保存到文件，发送到服务器，或者喜欢，搜索谷歌:-)，这个链接可能会有所帮助：
https ://developer.mozilla.org/en-US/docs/ Web/API/HTMLCanvasElement
自动调整颜色的简单功能。将根据直方图使图像变亮或变暗。
仅使照片中的某些区域变亮/变暗是困难的，因为很难加入已更改和未更改的区域。
对不起，没有小提琴，我这里的图片有问题。
<img alt="" src="bright.png" />
<br /><br />
<canvas id="cc"></canvas>
<script>
var img = new Image();
img.src = 'bright.png';
img.onload = function(){
var canvas = document.getElementById("cc");
var ctx = canvas.getContext("2d");
canvas.width=300;
canvas.height=200;
ctx.drawImage(img, 0, 0);
auto_adjust(ctx, 300, 200);
}
function auto_adjust(context, W, H){
//settings
var white = 240; //white color min
var black = 30; //black color max
var target_white = 1; //how much % white colors should take
var target_black = 0.5; //how much % black colors should take
var modify = 1.1; //color modify strength
var img = context.getImageData(0, 0, W, H);
var imgData = img.data;
var n = 0; //pixels count without transparent
//make sure we have white
var n_valid = 0;
for(var i = 0; i < imgData.length; i += 4){
if(imgData[i+3] == 0) continue; //transparent
if((imgData[i] + imgData[i+1] + imgData[i+2]) / 3 > white) n_valid++;
n++;
}
target = target_white;
var n_fix_white = 0;
var done = false;
for(var j=0; j < 30; j++){
if(n_valid * 100 / n >= target) done = true;
if(done == true) break;
n_fix_white++;
//adjust
for(var i = 0; i < imgData.length; i += 4){
if(imgData[i+3] == 0) continue; //transparent
for(var c = 0; c < 3; c++){
var x = i + c;
if(imgData[x] < 10) continue;
//increase white
imgData[x] *= modify;
imgData[x] = Math.round(imgData[x]);
if(imgData[x] > 255) imgData[x] = 255;
}
}
//recheck
n_valid = 0;
for(var i = 0; i < imgData.length; i += 4){
if(imgData[i+3] == 0) continue; //transparent
if((imgData[i] + imgData[i+1] + imgData[i+2]) / 3 > white) n_valid++;
}
}
//make sure we have black
n_valid = 0;
for(var i = 0; i < imgData.length; i += 4){
if(imgData[i+3] == 0) continue; //transparent
if((imgData[i] + imgData[i+1] + imgData[i+2]) / 3 < black) n_valid++;
}
target = target_black;
var n_fix_black = 0;
var done = false;
for(var j=0; j < 30; j++){
if(n_valid * 100 / n >= target) done = true;
if(done == true) break;
n_fix_black++;
//adjust
for(var i = 0; i < imgData.length; i += 4){
if(imgData[i+3] == 0) continue; //transparent
for(var c = 0; c < 3; c++){
var x = i + c;
if(imgData[x] > 240) continue;
//increase black
imgData[x] -= (255-imgData[x]) * modify - (255-imgData[x]);
imgData[x] = Math.round(imgData[x]);
}
}
//recheck
n_valid = 0;
for(var i = 0; i < imgData.length; i += 4){
if(imgData[i+3] == 0) continue; //transparent
if((imgData[i] + imgData[i+1] + imgData[i+2]) / 3 < black) n_valid++;
}
}
//save
context.putImageData(img, 0, 0);
//log('Iterations: brighten='+n_fix_white+", darken="+n_fix_black);
}
</script>