html 图像处理 灰度图和浮雕图类PS
2015-10-10 22:13
399 查看
html5 的canvas还有一些很酷炫的效果,接下来讲的是canvas对像素的处理,虽然略有些复杂,但实现出的效果,还是很赞的~~。
为了不让大家失望,先强调一句:下列效果需调用getImageData(),而这个方法会被某些浏览器阻止,如chrome。原因是:
受js同源策略影响,js跨域限制是不能获取非同一域名下的数据的,以下代码是在本地上测试的, 而本地的位置是没有域名的,所以浏览器都认为你是跨域,导致报错。
解决方法:可以用其他的浏览器。或者可以将图片写入PHP,具体可参照 解决getImageData跨域
第一个效果:灰度图
插入html如下:
<img id="img1" src="baijuyi.jpg" />
<input id="btnGO" type="button" value="转成灰度图"/><br />
<canvas id="c1" height="200" width="320"></canvas><br />
<script>
function $(id)
{
return document.getElementById(id);
}
function init()
{
$("btnGO").onclick=function()
{
c1.width=img1.width;
c1.height=img1.height;
var ctx=c1.getContext("2d");
ctx.drawImage(img1,0,0,c1.width,c1.height);//将image绘制到canvas上
var imgData=ctx.getImageData(0,0,c1.width,c1.height);//获取image的所有像素点存储在imgData数组里,每四个为一个像素的rgba值;从上到下,从左到右。
//比如imgData.data[0]~imgData.data[3]表示第一个像素点。
for(var i=0;i<imgData.data.length;i+=4)
{
var r=imgData.data[i],
g=imgData.data[i+1],
b=imgData.data[i+2];
var gray =(r*30+g*59+b*11+50)*0.01;//灰度值公式
imgData.data[i]=gray;
imgData.data[i+1]=gray;
imgData.data[i+2]=gray;
}
ctx.putImageData(imgData,0,0);//将image重绘到canvas中
}
}
</script>
第二种效果:浮雕图效果
<h2>像素操作</h2>
<img id="img1" src="baijuyi.jpg" />
<input id="btnGO" type="button" value="转成浮雕图"/><br />
<canvas id="c1" height="200" width="320"></canvas><br />
<script>
function $(id)
{
return document.getElementById(id);
}
function init()
{
$("btnGO").onclick=function()
{
c1.width=img1.width;
c1.height=img1.height;
var ctx=c1.getContext("2d");
ctx.drawImage(img1,0,0,c1.width,c1.height);
var imgData=ctx.getImageData(0,0,c1.width,c1.height);
console.log(imgData);
var iData=imgData.data;
//浮雕效果的实现可以有多种方式,这里介绍较简单的。新的像素色彩值是和右边像素的色彩值相减,然后再加128
for(var i=0;i<img1.height-1;i++)
{
for(var j=0;j<img1.width;j++)
{
var start=(i*img1.width+j)<<2;
var r=iData[start]-iData[start+4]+128,
g=iData[start+1]-iData[start+5]+128,
b=iData[start+2]-iData[start+6]+128;
//越界处理
r=(r<0)?0:(r>255)?255:r;
g=(g<0)?0:(g>255)?255:g;
b=(b<0)?0:(b>255)?255:b;
//再转灰度图
var g=(r*30+g*59+b*11+50)*0.01;
iData[start]=g;
iData[start+1]=g;
iData[start+2]=g;
}
}
ctx.putImageData(imgData,0,0);//将新数据绘入canvas中
}
}
init();//调用函数
</script>
为了不让大家失望,先强调一句:下列效果需调用getImageData(),而这个方法会被某些浏览器阻止,如chrome。原因是:
受js同源策略影响,js跨域限制是不能获取非同一域名下的数据的,以下代码是在本地上测试的, 而本地的位置是没有域名的,所以浏览器都认为你是跨域,导致报错。
解决方法:可以用其他的浏览器。或者可以将图片写入PHP,具体可参照 解决getImageData跨域
第一个效果:灰度图
插入html如下:
<img id="img1" src="baijuyi.jpg" />
<input id="btnGO" type="button" value="转成灰度图"/><br />
<canvas id="c1" height="200" width="320"></canvas><br />
<script>
function $(id)
{
return document.getElementById(id);
}
function init()
{
$("btnGO").onclick=function()
{
c1.width=img1.width;
c1.height=img1.height;
var ctx=c1.getContext("2d");
ctx.drawImage(img1,0,0,c1.width,c1.height);//将image绘制到canvas上
var imgData=ctx.getImageData(0,0,c1.width,c1.height);//获取image的所有像素点存储在imgData数组里,每四个为一个像素的rgba值;从上到下,从左到右。
//比如imgData.data[0]~imgData.data[3]表示第一个像素点。
for(var i=0;i<imgData.data.length;i+=4)
{
var r=imgData.data[i],
g=imgData.data[i+1],
b=imgData.data[i+2];
var gray =(r*30+g*59+b*11+50)*0.01;//灰度值公式
imgData.data[i]=gray;
imgData.data[i+1]=gray;
imgData.data[i+2]=gray;
}
ctx.putImageData(imgData,0,0);//将image重绘到canvas中
}
}
</script>
第二种效果:浮雕图效果
<h2>像素操作</h2>
<img id="img1" src="baijuyi.jpg" />
<input id="btnGO" type="button" value="转成浮雕图"/><br />
<canvas id="c1" height="200" width="320"></canvas><br />
<script>
function $(id)
{
return document.getElementById(id);
}
function init()
{
$("btnGO").onclick=function()
{
c1.width=img1.width;
c1.height=img1.height;
var ctx=c1.getContext("2d");
ctx.drawImage(img1,0,0,c1.width,c1.height);
var imgData=ctx.getImageData(0,0,c1.width,c1.height);
console.log(imgData);
var iData=imgData.data;
//浮雕效果的实现可以有多种方式,这里介绍较简单的。新的像素色彩值是和右边像素的色彩值相减,然后再加128
for(var i=0;i<img1.height-1;i++)
{
for(var j=0;j<img1.width;j++)
{
var start=(i*img1.width+j)<<2;
var r=iData[start]-iData[start+4]+128,
g=iData[start+1]-iData[start+5]+128,
b=iData[start+2]-iData[start+6]+128;
//越界处理
r=(r<0)?0:(r>255)?255:r;
g=(g<0)?0:(g>255)?255:g;
b=(b<0)?0:(b>255)?255:b;
//再转灰度图
var g=(r*30+g*59+b*11+50)*0.01;
iData[start]=g;
iData[start+1]=g;
iData[start+2]=g;
}
}
ctx.putImageData(imgData,0,0);//将新数据绘入canvas中
}
}
init();//调用函数
</script>
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- 使用canvas实现仿新浪微博头像截取上传功能
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- HTML5实现微信拍摄上传照片功能
- jQuery+HTML5加入购物车代码分享
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML5使用DeviceOrientation实现摇一摇功能
- MVC中基于Ajax和HTML5实现文件上传功能
- 替换html元素