Javascript HTML5画布增强图像

我有下面的功能使图像变亮/变暗

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

亮度=功能（增量）{
返回函数（像素、参数）{
var d=像素数据；
对于（变量i=0；i

---

我只是想尝试一些更有趣的东西，我能对图像进行自动增强吗？我的意思是只使照片中的某个区域变亮/变暗。我应该如何检测像素是否是暗的，例如，然后我应该稍微亮一点？谢谢。

您要做的是修改图像动态。
因此，对于规格化像素的亮度范围从0.0到1.0，您必须确定将应用于每个像素亮度的变换函数

您所寻找的函数必须增强较低的亮度（接近0），并保持较高亮度（接近1）的亮度完全相同

下面是一个（typicall）transfert函数的示例：

因此，您需要gamma>1。
例如，您可以在这里看到，如果输入亮度为0.2，则输出亮度为0.45，这是原始值的两倍以上。
对于0.8的输入，我们有0.95的值，增加了20%

要仅更改亮度而不更改感知的颜色，我看到的最简单的解决方案是使用另一个颜色空间，如hsl。
用h、s、l表示一种对人眼有意义的颜色：
h是色调：颜色，
饱和度是颜色的“强度”，
我是。。。亮度

因此，这些步骤是：

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.  

我用小提琴来说明：

拨弄结果：
摆弄自己：

编辑：这是一个修改过的版本，它将图像作为输入，然后 返回一个图像

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

该参数可以是gamma值（数字），也可以是变换函数 你喜欢的。
我为示例添加了gamma压缩函数。你可以在结果上看到 （向下滚动查看），压缩非常苛刻：所有亮度值 以比率*（最大-最小）为中心，这使图像非常可读，但对比度较低

代码如下：

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

//pow是函数的幂
//min是返回的最小值
//max是返回的最大值。
函数伽马（功率、最小值、最大值、x）{
返回最小值+数学功率（x，1/功率）*（最大值-最小值）；
}
//pow是用于曲线两部分的“gamma”
//min是返回的最小值/max是最大值
//中心是我们停止减少并开始扩大的亮度
//比率状态，其中降低的光度应介于最小值和最大值之间。
函数gammaCompress（功率、最小值、最大值、中心值、比率、x）{
var xr=0；
if（x<中心）{
xr=x/中心；
返回最小+数学功率（xr，1/pow）*（最大-最小）*比率；
}否则{
xr=（x-中心）/（1-中心）；
返回最小值+（最大-最小）*比值+数学功率（xr，1/pow）*（最大-最小）*（1-比值）；
}
}
函数getEnligthedImage（源图像，变换）{
//如果提供了一个数字，而不是绑定变换函数，
//假设它是一个伽马目标[0；1]
if（转换类型！=“函数”）{
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'）；
drawImage（img，0,0）；
var imgData=context.getImageData（0，0，画布宽度，画布高度）；
var pix=imgData.data；
var hslValue={h:0，s:0，l:0}；
var rgbValue={r:0，g:0，b:0}；
对于（变量i=0；i

如果您想对图像执行其他操作，如保存到文件、发送到服务器或类似操作，请搜索谷歌：-），此链接可能会有所帮助：

---

自动调整颜色的简单功能。将根据直方图使图像变亮或变暗

仅使照片中的特定区域变亮/变暗是困难的，因为很难将更改的区域和未更改的区域连接起来

对不起，不要乱动，我这里的图像有问题

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

var img=新图像（）；
img.src='bright.png'；
img.onload=函数（）{
var canvas=document.getElementById（“cc”）；
var ctx=canvas.getContext（“2d”）；
画布宽度=300；
帆布。高度=200；
ctx.drawImage（img，0,0）；
自动调整（ctx，300，200）；
}
功能自动调整（上下文、W、H）{
//背景
var white=240；//白色最小值
var black=30；//最大黑色颜色
var target_white=1；//白色应占多少百分比
var target_black=0.5；//黑色应占多少百分比
var modify=1.1；//颜色修改强度
var img=context.getImageData（0,0,W,H）；
var imgData=img.data；
var n=0；//像素计数不带透明
//确保我们有白色的
var n_valid=0；
对于（var i=0；i