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

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

上面所说的img, = '2d');
var  ,  :

var = ctxt;
}
img.src  。

html中需要有一个canvas

<= data[i+1],//绿色色深
    blue = canvas  。


假定我们已经取得了这个files列表,并且files中只有一个合法的图片文件。代码如下;i+=4){
  .src就可以指向这个src了。
    image.src , FileReader(); 
// 绑定load事件自动回调函数 
reader,而是想用户自己在本机上选择的怎么办;= data[i],//红色色深
    green .jpg"指定的,但是如果你的相片不是在网络上, 
 //读取整张图片的像素;alpha)

}

 。


比如你有一个<= canvas; .drawImage(img;data[i+3].jpg'img = id="canvas">对不你,你的浏览器不支持Canvas</canvas> .target.result;e,//蓝色色深
 = function(e){ 
    var //然后我们image; len;reader 0);
    var .toString());= data;data[i+2];

js代码:

var 
for(var i .onload .log(data, data;480;0;input id="" type="file" />的上传控件selector,用户选择好文件以后。

你就可以取得这个selector.files这个对象列表了;ctxt.getImageData(0,  .src 是通过一个相对路径比如“img/pic;ctxt ?其实也是可以的;console; 。
 ;//src也可以是从文件选择控件中取得。

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

var data = data .getContext('0;//透明度
    //因此RGB颜色就是(red, green, blue;new Image;
img.onload = 

必须浏览器要支持Canvas才可以; img/pic;= src;
    //然后进行上面的各种处理。
}; 
// 读取文件内容 
reader.readAsDataURL(files[0]);alpha = .getImageData(0, 0, img.width, img.height).data; 480).data;var red .length; i<=0,len , function(){
    ctxt;src = 

追问
不是很理解这段代码,像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

提交
取消