html 图像处理 灰度图和浮雕图类PS

html 图像处理 灰度图和浮雕图类PS浮雕图,灰度图,用html5canvas处理,类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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/151352.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java动态程序设计:反射介绍

    使用运行的类的信息使你的程序设计更加灵活反射授予了你的代码访问装载进JVM内的Java类的内部信息的权限,并且允许你编写在程序执行期间与所选择的类的一同工作的代码,而不是在源代码中。这种机制使得反射

    2021年12月24日
  • touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event使用

    touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event使用iOSProgramming–触摸事件处理(2)        在上一篇《iOSProgramming–触摸事件处理(1)》中了解触摸、事件和响应者之后,接下去学习如何处理用户的触摸事件。首先触摸的对象是视图,而视图的类UIView继承了UIRespnder类,但是要对事件作出处理,还需要重写UIResponder类中定义的事件处理函数。根据不通的触摸状态,程序会调用相应的处理

  • scp和rsync命令[通俗易懂]

    scp和rsync命令[通俗易懂]SCP命令(1)scp定义scp可以实现服务器与服务器之间的数据拷贝。(fromserver1toserver2)(2)基本语法scp-r$pdir/$fname$user@$host:$pdir/$fname命令递归要拷贝的文件路径/名称目的地用户@主机:目的地路径/名称(3)基本示例scp-rjdk1.8.0_291/root@hadoop103:opt/modulescp-rroot@hadoop102:/opt/module/*root@h

  • Spring中,applicationContext.xml 配置文件在web.xml中的配置详解

    Spring中,applicationContext.xml 配置文件在web.xml中的配置详解一、首先写一下代码结构。二、再看web.xml中的配置情况。&lt;?xmlversion="1.0"encoding="UTF-8"?&gt;&lt;web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xsi:s…

  • 我是如何自学 Python 的

    我是如何自学 Python 的我是如何自学Python的

  • XmlDocument操作XML「建议收藏」

    XmlDocument操作XML「建议收藏」https://www.cnblogs.com/fengxuehuanlin/p/5631664.htmlC#XmlDocument操作XMLXML:ExtensibleMarkupLanguage(可扩展标记语言)的缩写,是用来定义其它语言的一种元语言,其前身是SGML(StandardGeneralizedMarkupLanguage,标准通用标记语言)。它没有标签集(t…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号