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

如题,请问下高手能不能用javascript查看客户端图片的RGB值,有人说行,有的人说必须利用服务器,我都是糊涂了,因为可以查询图片宽度,因此我认为是可以查RGB的,请问下高手到底是怎么回事,这是我参照一些资料写的关于打开本地图片的javascript代码,要增加... 展开
我有更好的答案
推荐于2017-11-26 23:51:52 最佳答案

必须浏览器要支持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]);
追问
不是很理解这段代码,像canvas和2d都是什么啊,而且这个怎么指定选取的位置呢,我感觉选择文件位置为什么在查询颜色的后面呢,是不是这两段代码应该放在一起呢
追答

我又重新编辑了一下。

canvas是html5中的新API。画布。我们可以在一个叫做canvas的html区域中绘制任意的图像。

getContext('2d')是指画笔的上下文。2d就是指带我们绘制的是二维图像。

具体的东西可以搜索百度。


真正代码的逻辑应该是:

  1. 用户选择图片。

  2. 读取用户所选文件资源。其中readAsDataURL会生成base64编码的图像url。

  3. 使用canvas加载这个url的图片像素。

  4. 获取指定像素点的内容。

追问
顺序我知道了,但是这几个javascript的函数还是没弄明白,我没学过javascript,理解不了。能不能帮忙把整个源代码写出来啊,谢谢

cainiaokan

采纳率:59% 来自团队:js开发 擅长: JAVA相关 其他编程语言 JavaScript Html/Css

为您推荐:

×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消