javascript加载图片查看具体某一点RGB值

发布网友发布时间：2022-04-21 14:36

共1个回答

热心网友时间：2022-04-11 11:14

必须浏览器要支持Canvas才可以。

html中需要有一个canvas

<canvas id="canvas">对不你，你的浏览器不支持Canvas</canvas>

js代码：

var ctxt = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
    ctxt.drawImage(img, 0, 0);
    var data = ctxt.getImageData(0, 0, img.width, img.height).data;//读取整张图片的像素。
    console.log(data, data.toString());
}
img.src = 'img/pic.jpg';//src也可以是从文件选择控件中取得。

然后获取像素的某点颜色值。

var data = ctxt.getImageData(0, 0, 480, 480).data;
for(var i =0,len = data.length; i<len;i+=4){
    var red = data[i],//红色色深
    green = data[i+1],//绿色色深
    blue = data[i+2],//蓝色色深
    alpha = data[i+3];//透明度
    //因此RGB颜色就是(red, green, blue, alpha)

}

上面所说的img.src 是通过一个相对路径比如“img/pic.jpg"指定的，但是如果你的相片不是在网络上，而是想用户自己在本机上选择的怎么办？其实也是可以的。

比如你有一个<input id="" type="file" />的上传控件selector，用户选择好文件以后。

你就可以取得这个selector.files这个对象列表了。

假定我们已经取得了这个files列表，并且files中只有一个合法的图片文件。代码如下：

var reader = new FileReader();
// 绑定load事件自动回调函数
reader.onload = function(e){
    var src = e.target.result;
    //然后我们image.src就可以指向这个src了。
    image.src = src;
    //然后进行上面的各种处理。
};
// 读取文件内容
reader.readAsDataURL(files[0]);