Question

我有以下功能来使图像变亮/变暗。

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

只是想尝试更有趣的东西，我可以对图像执行自动增强吗？我的意思是仅照亮/变暗照片中的某个区域。我应该如何检测像素是否是暗的，然后我应该稍微照亮它？感谢。

Answer 1

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

您寻求的功能必须增强低亮度（接近0），并保持高光度（接近1）的相同亮度。

以下是（典型的）转移功能的示例：
enter image description here

所以你需要一个伽玛＆gt; 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.

我做了一个小提琴来说明：

小提琴结果：http://jsfiddle.net/gamealchemist/yqvmC/embedded/result/
摆弄自己：http://jsfiddle.net/gamealchemist/yqvmC/

编辑：这是一个修改版本，它将图像作为输入，和返回图片。

参数可以是伽玛值（数字），也可以是变换函数你喜欢什么。
我为这个例子添加了一个伽马压缩函数。你可以看到结果（向下滚动以查看它），压缩非常苛刻：所有光度值以比率*（最大 - 最小）为中心，这使图像非常易读，但对比度低。

以下是代码：

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

Answer 2

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

照片中的某些区域变亮/变暗很难，因为很难加入更改且未更改的区域。

抱歉没有小提琴，我的图像有问题。

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

HTML5 Canvas增强图像

2 个答案: