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> 展开
<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> 展开
1个回答
展开全部
必须浏览器要支持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就是指带我们绘制的是二维图像。
具体的东西可以搜索百度。
真正代码的逻辑应该是：
用户选择图片。
读取用户所选文件资源。其中readAsDataURL会生成base64编码的图像url。
使用canvas加载这个url的图片像素。
获取指定像素点的内容。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
