小编给大家分享一下帆布学习和滤镜,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
在这个数码产品泛滥的时代里,拍照已经成为生活不可或缺的一部分,不管是居家,踏青,还是远途旅行,总会拍一些美美的照片。但相机直接拍出来的照片往往和我们的心理预期有一定的差距,那么怎么减小这种差距呢?答案是美颜p图,于是各种美颜相机铺天盖地而来,p图已经成为一门随身技能。
其实所谓的美颜不过是很多滤镜的配合使用罢了,而滤镜就是通过一定的算法来操作图片像素进而得到一些特殊的图像效果。用过Photoshop的朋友都清楚ps中有一大堆的滤镜、下面我们将会用js的帆布技术去实现几种滤镜效果。
最近学习了HTML5中的重头戏——<代码>帆布> 代码。利用画布,前端人员可以很轻松地,进行图像处理。其API繁多,这次主要学习常用的API,并且完成以下两个代码:
- <李>
实现去色滤镜
李> <李>实现负色(反色)滤镜
李>
<强> 1.1什么是帆布吗? 强>
这个HTML元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。
<强> 1.2画布和svg, vml的区别? 强>
<代码> & lt; canvas> 代码标记和svg以及vml之间的一个重要的不同的是,<代码> & lt; canvas> 代码有一个基于JavaScript的绘图API,而svg和vml使用一个XML文档来描述绘图。
大多数帆布绘图API都没有定义在<代码> & lt; canvas> 代码>元素本身上,而是定义在通过画布的<代码> getContext() 代码>方法获得的一个“绘图环境”对象上。而<代码> & lt; canvas> 代码>元素本身默认的宽高分别是300 px, 150 px。
<强> 2.1帆布绘制矩形强>
//处理帆布元素 var c=document.querySelector (“# my-canvas"); c。宽度=150; c。身高=70;//获取指定帆布标签上的上下文对象 var ctx=c.getContext (“2 d"); ctx。fillStyle=? FF0000";//颜色 ctx。fillRect (0, 0, 150, 75);//形状
<强> 2.2帆布绘制路径强>
var c=document.querySelector (“# my-canvas"); var ctx=c.getContext (“2 d"); ctx。函数(0,0);//开始坐标 ctx。画线(200、100);//结束坐标 ctx.stroke ();//立即绘制
<强> 2.3帆布绘制圆形强>
对于<代码> ctx.arc() 代码>这个接口,5个参数是:<代码> (x, y, r,启动、停止)> 代码。其中,x和y是圆心坐标,r是半径。
而开始<代码> 代码>和<代码> 代码>停止的单位是<强>弧度制>强。不是长度,也不是°。
var c=document.querySelector (“# my-canvas"); var ctx=c.getContext (“2 d"); ctx.beginPath (); ctx。弧(95、50、40 0 2 * Math.PI); ctx.stroke ();
<强> 2.4帆布绘制文字强>
var c=. getelementbyid (“myCanvas"); var ctx=c.getContext (“2 d"); ctx。字体=?0 px Arial"; ctx.fillText(“你好World" 10 50);
<强> 3.1常用API接口强>
关于图像处理的API,主要有4个:
绘制图像:<代码> drawImage (img, x, y,宽度、高度)代码>或<代码> drawImage (img, sx, sy,向下,sheight, x, y,宽度、高度)代码>
获取图像数据:<代码> getImageData (x, y,宽度、高度)代码>
重写图像数据:<代码> putImageData (imgData x, y [, dirtyY dirtyX dirtyWidth, dirtyHeight]) 代码>
导出图像:<代码> toDataURL([类型,encoderOptions]) 代码>
更详细的API和参数说明请看:帆布图像处理API参数讲解
<强> 3.2绘制图像强>
在此些API的基础上,我们就可以在画布<代码> 代码>元素中绘制我们的图片。假设我们图片是<代码>。/img/photo.jpg> 代码。
& lt; script> 窗口。onload=function () { var img=新形象()//声明新形象的对象 img。src=https://www.yisu.com/zixun/薄?img/photo.jpg”//图片加载后 img。onload=function () { 画布var=document.querySelector(“#我的画布”); var ctx=canvas.getContext (2 d);//根据形象大小,指定帆布大小 画布。宽度=img.width 画布。身高=img.height//绘制图像 ctx。drawImage (img, 0, 0,画布。宽度,canvas.height) } } 脚本>
如下图所示,图片被画入了画布: