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

如题,请问下高手能不能用javascript查看客户端图片的RGB值,有人说行,有的人说必须利用服务器,我都是糊涂了,因为可以查询图片宽度,因此我认为是可以查RGB的,请问下高手到底是怎... 如题,请问下高手能不能用javascript查看客户端图片的RGB值,有人说行,有的人说必须利用服务器,我都是糊涂了,因为可以查询图片宽度,因此我认为是可以查RGB的,请问下高手到底是怎么回事,这是我参照一些资料写的关于打开本地图片的javascript代码,要增加怎么一句代码才能变成查看指定位置(x,y)的RGB呢,我javascript水平比较水

<html>
<head>
<title>选择中心点</title>
<script language="javascript">

function testviewpic(mypic,imgfilepath)
{
var myflag=0; //进行筛选的图片的扩展名
var aa = ".gif|.jpg|.jpeg|.bmp|.png"; //分离出可以通过的图片扩展名
var bb = aa.split('|'); //进行循环判断,路经是否为图片
for(var i=0;i<bb.length;i++)
{
//检索路径是否含有指定图片的扩展名
var cc = imgfilepath.value.toLowerCase().indexOf(bb[i]);
if (cc > 0)
{
//当图片的路经中含有指定的扩展名时,对状态进行赋值
myflag=1; mypic.src=imgfilepath.value; mypic.style.display=""; mypic.border=4; break;
}
}
//如果状态为错误,弹出信息框
if(myflag == 0)
{
alert("current path not picture"); //清除上传框的路径值
imgfilepath.outerHTML = imgfilepath.outerHTML; imgfilepath.value=""; mypic.src=""; mypic.style.display="none";
}
wpic = imgfilepath.value;
alert(wpic)
}

</script>

</head>
<body>
<form id="form1">
<table>
<tr>
<td class="tdLeft">图片上传:</td>
<td><INPUT id="img_upload" type="file" runat="server" onchange="testviewpic(showimg,this.form.img_upload);"> </td> </tr>
<tr> <td class="tdLeft"></td> <td><img id="showimg" alt="phote" src="" style="display:none"></td> </tr> </table>
</form>
</body>
</html>
展开
 我来答

答题抽奖

首次认真答题后

即可获得3次抽奖机会,100%中奖。

更多问题
1个回答
最佳答案
cainiaokan
来自电脑网络类芝麻团 推荐于2017-11-26
cainiaokan
采纳数:340 获赞数:2451 LV9
擅长:JAVA相关 其他编程语言 JavaScript Html/Css
参与团队:js开发
向TA提问 私信TA
展开全部

必须浏览器要支持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. 获取指定像素点的内容。

为你推荐:

广告

您可能关注的内容

×

类别

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

说明

0/200

提交
取消