Question

我试图获取图像的平均颜色，与图像的各个切片的平均颜色进行比较，以找到与平均值最不同的区域。它是根据最感兴趣的领域自动裁剪图像的项目的一部分。

我得到了奇怪的结果，所以我创建了一个演示页面，将完全平坦的红色图像与其切片进行比较。每个切片应具有与图像相同的颜色（192,0,0,255）。但是，正如你所看到的，他们没有：

http://gschoppe.com/projects/jQuery.smartCrop/demo.html（所有数据都进入控制台）

这是演示中的平均颜色函数：

var getAverageColor = function(canvas) {
    var context = canvas.getContext('2d');
    var imgdata = context.getImageData(0, 0, canvas.width, canvas.height);
    var pixels  = imgdata.data;
    var color   = {red:0,green:0,blue:0,alpha:0};
    // Loop over each pixel.
    for (var i = 0, n = pixels.length; i < n; i += 4) {
        color.red   += pixels[i  ]/255; //red
        color.green += pixels[i+1]/255; //green
        color.blue  += pixels[i+2]/255; //blue
        color.alpha += pixels[i+3]/255; //alpha
    }
    color.red   = color.red/(pixels.length/4);
    color.green = color.green/(pixels.length/4);
    color.blue  = color.blue/(pixels.length/4);
    color.alpha = color.alpha/(pixels.length/4);
    return color;
}

以及这里所谓的循环（简化版）：

var findPointOfInterest = function(canvas) {
    var sliceSize     = Math.round(canvas.width/20);
    var avgColor      = getAverageColor(canvas);
    console.log("avg color: ");
    console.log(avgColor);
    var sliceColor    = null;
    for(var i=0;i<canvas.width;i+=sliceSize) {
        if(i+sliceSize > canvas.width)
            sliceSize = canvas.width % sliceSize;
        var temp      = document.createElement('canvas');
        temp.width    = sliceSize;
        temp.height   = canvas.height;
        var context   = temp.getContext('2d');
        context.clearRect ( 0, 0, sliceSize, canvas.height );
        context.drawImage(canvas, i, 0, sliceSize, canvas.height, 0, 0, sliceSize, canvas.height);
        sliceColor    = getAverageColor(temp);
        console.log(sliceColor);
    }
}

我为JSFiddle制作了一个更简单的问题版本，但它似乎没有错误！ GAH！这是简单版本：http://jsfiddle.net/tLMPk/（一切都记录到控制台）

任何人都可以帮助我追踪这件事吗？

试图获得画布的平均（平均）颜色与其切片。获得不准确的结果

0 个答案: