canvas学习和滤镜实现代码


Posted in HTML / CSS onAugust 22, 2018

在这个数码产品泛滥的时代里,拍照已经成为生活不可或缺的一部分,不管是居家,踏青,还是远途旅行,总会拍一些美美的照片。但相机直接拍出来的照片往往和我们的心理预期有一定的差距,那么怎么减小这种差距呢?答案是美颜P图,于是各种美颜相机铺天盖地而来,P图已经成为一门随身技能。

其实所谓的美颜不过是很多滤镜的配合使用罢了,而滤镜就是通过一定的算法来操作图片像素进而得到一些特殊的图像效果。用过Photoshop的朋友都清楚ps中有一大堆的滤镜,下面我们将会用js的canvas技术去实现几种滤镜效果。

最近学习了 HTML5 中的重头戏-- canvas 。利用 canvas,前端人员可以很轻松地、进行图像处理。其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码:

  • 实现去色滤镜
  • 实现负色(反色)滤镜

1 了解 canvas?

1.1 什么是 canvas?

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

1.2 canvas 和 svg、vml 的区别?

<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是, <canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。

2 canvas 绘图学习

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。而 <canvas> 元素本身默认的宽高分别是 300px、150px。

2.1 canvas 绘制矩形

// 处理canvas元素
var c = document.querySelector("#my-canvas");
c.width = 150;
c.height = 70;

// 获取 指定canvas标签 上的context对象
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000"; // 颜色
ctx.fillRect(0, 0, 150, 75); // 形状

2.2 canvas 绘制路径

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0); // 开始坐标
ctx.lineTo(200, 100); // 结束坐标
ctx.stroke(); // 立即绘制

2.3 canvas 绘制圆形

对于 ctx.arc() 这个接口,5 个参数是: (x,y,r,start,stop) 。其中,x 和 y 是圆心坐标,r 是半径。

startstop 的单位是 弧度制 。不是长度,也不是 °。

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

2.4 canvas 绘制文字

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

3 canvas 图像处理学习

3.1 常用 API 接口

关于图像处理的 API,主要有 4 个:

绘制图像: drawImage(img,x,y,width,height)drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

获取图像数据: getImageData(x,y,width,height)

重写图像数据: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

导出图像: toDataURL([type, encoderOptions])

更详细的 API 和参数说明请看: canvas 图像处理 API 参数讲解

3.2 绘制图像

在此些 API 的基础上,我们就可以在 canvas 元素中绘制我们的图片。假设我们图片是 ./img/photo.jpg

<script>
  window.onload = function () {
    var img = new Image() // 声明新的Image对象
    img.src = "./img/photo.jpg"
    // 图片加载后
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");

      // 根据image大小,指定canvas大小
      canvas.width = img.width
      canvas.height = img.height

      // 绘制图像
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    }
  }
</script>

如下图所示,图片被画入了 canvas:

canvas学习和滤镜实现代码 

4 实现滤镜

这里我们主要借用 getImageData 函数,他返回每个像素的 RGBA 值。借助图像处理公式,操作像素进行相应的、数学运算即可。

4.1 去色效果

去色效果相当于就是老旧相机拍出来的黑白照片。人们根据人眼的敏感程度,给出了如下公式:

gray = red * 0.3 + green * 0.59 + blue * 0.11

代码如下:

<script>
  window.onload = function () {
    var img = new Image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 开始滤镜处理
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgData.data.length / 4; ++i) {
        var red = imgData.data[i * 4],
          green = imgData.data[i * 4 + 1],
          blue = imgData.data[i * 4 + 2];
        var gray = 0.3 * red + 0.59 * green + 0.11 * blue; // 计算gray
        // 刷新RGB,注意:
        // imgData.data[i * 4 + 3]存放的是alpha,不需要改动
        imgData.data[i * 4] = gray;
        imgData.data[i * 4 + 1] = gray;
        imgData.data[i * 4 + 2] = gray;
      }
      ctx.putImageData(imgData, 0, 0); // 重写图像数据
    }
  }
</script>

效果如下图所示:

canvas学习和滤镜实现代码 4.2 负色效果

负色效果就是用最大值减去当前值。而 getImageData 获得的 RGB 中的数值理论最大值是:255。所以,公式如下:

new_val = 255 - val

代码如下:

<script>
  window.onload = function () {
    var img = new Image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 开始滤镜处理
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgData.data.length / 4; ++i) {
        var red = imgData.data[i * 4],
          green = imgData.data[i * 4 + 1],
          blue = imgData.data[i * 4 + 2];
        // 刷新RGB,注意:
        // imgData.data[i * 4 + 3]存放的是alpha,不需要改动
        imgData.data[i * 4] = 255 - imgData.data[i * 4];
        imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1];
        imgData.data[i * 4 + 2] = 255 - imgData.data[i * 4 + 2];
      }
      ctx.putImageData(imgData, 0, 0); // 重写图像数据
    }
  }
</script>

效果图如下:

canvas学习和滤镜实现代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3的transform中scale缩放详解
Dec 08 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 #HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 #HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 #HTML / CSS
详解WebSocket跨域问题解决
Aug 06 #HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 #HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 #HTML / CSS
Html5页面二次分享的实现
Jul 30 #HTML / CSS
You might like
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Python中实现三目运算的方法
2015/06/21 Python
Python的多态性实例分析
2015/07/07 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
HTML5 与 XHTML2
2008/10/17 HTML / CSS
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
护理学中专毕业生求职信
2013/11/11 职场文书
国际会议邀请函范文
2014/01/16 职场文书
《学会合作》教学反思
2014/04/12 职场文书
趣味运动会通讯稿
2015/07/18 职场文书