Question

我想获得包含大量周围白色的图像的区域（左上角TO右下角）。像裁剪之前找到实际图像区域的智能裁剪工具，因此该区域不包含不可靠的白色像素。

我理解如何迭代图像的像素，每个像素由4个值（RGBA）组成。这是对的吗？

但如果我找到第一个不是白色的像素。如何获得该像素的x，y位置（图像中的注释）？

var imageSource = $("#image").attr("src");
var img = new Image();
img.src = imageSource; 

img.onload = function(){

    var canvas = document.createElement("canvas");                  
    canvas.width = img.width;                   
    canvas.height = img.height;                 
    var ctx = canvas.getContext('2d');                      
    ctx.drawImage(img, 0, 0);                         

    //Define area of the actual iamge by getting first rgb that is not 255.
    //
    var pixels = ctx.getImageData(0, 0,  img.width, img.height);
    var data = pixels.data;

    //Go through pixel for pixel in the image
    //and get the first pixel that is not white
    var firstPixelNotWhite = 0;

    for (var i = 0, n = data.length; i < n; i+= 4) {
        if (parseInt(data[i]) !== 255) {
            firstPixelNotWhite = i;
            console.log(firstPixelNotWhite);
            //How to get x,y coordinates inside this image where the first pixel is not white  

        }
    }

}

背景我为什么要这个？

当用户将鼠标悬停在图像上时，我想调用一个函数，并且我知道如何使用哪种颜色的用户（在图像上），但只是逐个像素。

问题在于，如果图像包含一些白色和许多其他颜色，则会调用该函数，因为用户将鼠标悬停在一个像素上。我希望在“实际图像区域”之外调用该函数，因此我的方法是创建实际图像区域的左上角和右下角的位置，因此我可以比较鼠标位置，如果它们在此图像区域内或不

如何根据画布中的图像像素获取x，y位置？

0 个答案: