您要做的是修改图像动态。
因此，对于范围从 0.0 到 1.0 的标准化像素的亮度，您必须决定将应用于每个像素的亮度的变换函数。
您寻求的功能必须增强较低的亮度（接近 0），并为高亮度（接近 1）保持相同的亮度。
这是一个（典型的）转移函数示例：
所以你需要一个 > 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