资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/canvas学习和滤镜实现

canvas学习和滤镜实现

cheng10 / 1311人阅读

摘要：最近学习了中的重头戏。其繁多，这次主要学习常用的，并且完成以下两个代码实现去色滤镜实现负色反色滤镜欢迎入群。其中，和是圆心坐标，是半径。而和的单位是弧度制。什么是更多滤镜实现去色效果去色效果去色效果相当于就是老旧相机拍出来的黑白照片。

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

  1. 实现去色滤镜
  2. 实现负色(反色)滤镜

欢迎入群：857989948 。IT 技术深度交流和分享，涉及方面包括但不限于：网站制作、运营、UI 设计、算法分析、大数据、人工智能等。本群主打有深度、有态度的技术交流，欢迎热衷记录知识的您的加入。

1 了解 canvas？

1.1 什么是 canvas？

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

1.2 canvas 和 svg、vml 的区别？

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

2 canvas 绘图学习

大多数 Canvas 绘图 API 都没有定义在 元素本身上，而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。而元素本身默认的宽高分别是 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 是半径。

而start和stop的单位是弧度制。不是长度，也不是 °。

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。

如下图所示，图片被画入了 canvas：

4 实现滤镜

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

什么是 RGBA？

更多滤镜实现

4.1 去色效果

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

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

代码如下：

效果如下图所示：

4.2 负色效果

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

new_val = 255 - val

代码如下：

效果图如下：

本篇文章来自董沅鑫的个人网站，引用、转载请指明出处。

查看更多知识，或者技术交流：请访问godbmw.com

私有云 服务器托管 java实现滤镜效果 实现深度学习 深度学习实现 机器学习实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1907.html

相关文章

  • canvas学习和滤镜实现

    摘要：最近学习了中的重头戏。其繁多，这次主要学习常用的，并且完成以下两个代码实现去色滤镜实现负色反色滤镜欢迎入群。其中，和是圆心坐标，是半径。而和的单位是弧度制。什么是更多滤镜实现去色效果去色效果相当于就是老旧相机拍出来的黑白照片。 最近学习了 HTML5 中的重头戏--canvas。利用 canvas，前端人员可以很轻松地、进行图像处理。其 API 繁多，这次主要学习常用的 API，并且...

    gclove 评论0 收藏0

  • wx-caman——基于 CamanJS 的微信小程序 Canvas 像素级滤镜处理库

    摘要：但是由于微信小程序中的组件与元素有较大差异，因此传统的处理库几乎无法在小程序中使用。在调研了一些传统浏览器端的项目后，我发现的功能比较完善，同时也比较容易对微信小程序进行适配。由封装而来，基于进行了重写，并针对微信小程序进行了适配。 做这个项目的初衷是希望能够开发一款不依赖服务端而纯通过客户端渲染为图片添加滤镜的小程序。但是由于微信小程序中的 canvas 组件与 DOM Canvas...

    saucxs 评论0 收藏0

  • 开始学习 PixiJS

    摘要：它自动侦测使用或者。开发者无需专门学习就能感受到强大的硬件加速的力量。要注意的是，虽然非常适合制作游戏，但它并不是一个游戏引擎，它的核心本质是尽可能快速有效地在屏幕上移动物体。可以被处理的图像被称作纹理。 PixiJS 介绍 PixiJS 是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。 Pixi...

    fredshare 评论0 收藏0

  • 前端图像处理指南

    摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。 计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

    Anshiii 评论0 收藏0

发表评论

登陆后可评论

0条评论

cheng10

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<