html 图像处理 灰度图和浮雕图类PS
大家好,又见面了,我是你们的朋友全栈君。
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”).οnclick=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”).οnclick=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>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/151352.html原文链接:https://javaforall.cn
相关文章
- HTML入门教程_html代码基础
- HTML中常用meta标签整理
- 在线html代码生成器,支持网页快速排版 CSS代码一键生成的在线设计工具
- java发送邮件带url、html
- html导航栏自动调间距,HTML CSS导航栏间距[通俗易懂]
- html refresh原理,HTML meta refresh 刷新与跳转(重定向)页面
- js把HTML转成对象,将js对象转换为html「建议收藏」
- html中超链接使用_HTML超链接代码
- 一个请求的组成、静态页面和动态页面、HTML, CSS和JS、浏览器渲染的过程
- !DOCTYPE html文档类型声明
- 其他html元素和属性
- WordPress 技巧:让 Widget 标题支持简单的 HTML 标签
- Linux上跑起来的HTML之旅(linux运行html)
- [HTML 5] 辐射式伞状网页背景特效代码下载与使用
- 文件MySQL数据库存储HTML文件.(mysql存html)
- 文件Linux查看HTML文件的简单方法(linux查看html)
- HTML <i> 标签
- HTML <param> 标签
- HTML <tr> 标签
- 使用HTML实现MySQL资料读取(html读取mysql)
- Linux环境下Web开发的HTML文件编辑(html文件 Linux)
- HTML连接Oracle利用JavaScript即可实现(html连接oracle)
- 不用模板,只用ASP+FSO生成静态HTML页的一个方法
- ASP生成html的新方法
- HTML<!DOCTYPE>标签
- HTML,CSS,JavaScript速查表推荐