跟月影学可视化
月影
前奇虎 360 奇舞团团长,可视化 UI 框架 SpriteJS 核心开发者,《JavaScript 王者归来》作者
30206 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 54 讲
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

12 | 如何使用滤镜函数实现美颜效果?

实现更加丰富的效果
更灵活
用于给照片“美颜”
用线性方程或矩阵变换改变像素颜色
利用Canvas的getImageData API获取像素数据
内置滤镜
高斯模糊滤镜
滤镜函数
实现更加丰富的效果
更灵活
实现美颜效果
实现灰度化图片
用于给图片“磨皮”
对图片进行高斯运算
生成高斯分布矩阵
实现不同的颜色变换
可调节的灰度化颜色矩阵
通过矩阵与像素颜色向量相乘实现
用于处理颜色变换
将处理过程抽象成通用模块
遍历并加权平均处理
获取每个像素点的RGB值
加权平均RGB通道的值
应用广泛,能实现多种效果
用程序处理图像上每个像素点
存储方式:Canvas2D以4个通道存放每个像素点的颜色信息
每个像素点描述图像上的一个点
图像由像素点组成
分享给朋友
欢迎留言和分享练习过程
利用鼠标事件和学过的内容,做出一个图片局部“放大器”的效果
像素化的优势
高斯模糊滤镜
像素处理
核心概念
像素处理的优势
CSS滤镜
实现效果
高斯模糊
颜色滤镜函数
颜色矩阵
重构代码以扩展其他效果
实现思路
像素处理
像素化
推荐阅读
小试牛刀
要点总结
像素化与CSS滤镜
应用三:使用高斯模糊对照片美颜
应用二:使用像素矩阵通用地改变像素颜色
应用一:实现灰度化图片
像素处理
如何使用滤镜函数实现美颜效果

该思维导图由 AI 生成,仅供参考

你好,我是月影。
通过前面的课程,我们初步了解了浏览器的图形系统,也学会了使用基本的数学和几何方法来生成和处理图像,还能用简单的图形组合来构成复杂的图案。从这一节课开始,我们进入一个新的模块,开始学习像素处理。
在可视化领域里,我们常常需要处理大规模的数据,比如,需要呈现数万甚至数十万条信息在空间中的分布情况。如果我们用几何绘制的方式将这些信息一一绘制出来,性能可能就会很差。
这时,我们就可以将这些数据简化为像素点进行处理。这种处理图像的新思路就叫做像素化。在可视化应用中,图片像素化处理是一个很重要手段,它能够在我们将原始数据信息转换成图形后,进一步处理图形的细节,突出我们想要表达的信息,还能让视觉呈现更有冲击力。
因为像素化的内容比较复杂,能做的事情也非常多,所以我们会用五节课的时间来讨论。今天是第一节课,我们先来看看图片像素化的基本思路和方法,体会如何用像素化来处理照片,从而达到“美颜”的效果。

如何理解像素化?

首先,我们来理解两个基础的概念。第一个是像素化。所谓像素化,就是把一个图像看成是由一组像素点组合而成的。每个像素点负责描述图像上的一个点,并且带有这个点的基本绘图信息。那对于一张 800 像素宽、600 像素高的图片来说,整张图一共就有 48 万个像素点。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入介绍了如何利用像素处理和颜色矩阵来实现图像处理效果,重点讲解了灰度化图片的过程和颜色矩阵的应用。作者通过具体的代码示例,展示了如何使用JavaScript中的滤镜函数实现美颜效果,并提供了重构代码以扩展其他效果的思路。文章还介绍了颜色滤镜函数的结构和不同效果的实现原理,包括改变亮度、饱和度、对比度、透明度、反色和旋转色相等滤镜函数的具体实现方法。通过本文,读者可以快速了解像素处理的基本原理和实现方法,适合对图像处理感兴趣的读者阅读学习。整体而言,本文以简洁清晰的语言,结合具体的代码示例,帮助读者快速了解了像素处理的基本原理和实现方法,适合对图像处理感兴趣的读者阅读学习。文章还介绍了高斯模糊的原理和算法,以及如何利用高斯模糊实现美颜效果。此外,还探讨了像素化与CSS滤镜的应用,以及像素处理在可视化领域的灵活性和优势。通过本文,读者可以了解到像素处理的核心概念、滤镜函数、高斯模糊滤镜以及内置滤镜的应用,为进一步学习和实践提供了基础和启发。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(8)

  • 最新
  • 精选
  • Zack
    lib/util.js 请问 traverse 函数传递给 pass 的 rgb 值为什么要除以255呢? export function traverse(imageData, pass) { const {width, height, data} = imageData; console.log('data: ', data); for(let i = 0; i < width * height * 4; i += 4) { const [r, g, b, a] = pass({ r: data[i] / 255, // 每个通道是 8 个比特位,也就是 0~255 的十进制数值 g: data[i + 1] / 255, b: data[i + 2] / 255, a: data[i + 3] / 255, index: i, width, height, x: ((i / 4) % width) / width, y: Math.floor(i / 4 / width) / height }); data.set([r, g, b, a].map(v => Math.round(v * 255)), i); } return imageData; }

    作者回复: 因为这里做了归一化,接受的是0~1的值,方便矩阵运算

    2020-12-08
    1
  • 张旭
    老师,颜色矩阵为什么是4*5,不是4*4呢?

    作者回复: 实际上4*5是一个简化了最后一行的5*5的矩阵,因为4*4矩阵的仿射变换用5*5齐次矩阵来表示。这个和为什么css的transform-matix是2*3道理一样

    2020-07-21
    3
    1
  • 秋谷
    老师,灰度矩阵那块,矩阵运算都明白了,但是最后得出的颜色矩阵[ r + 1 - p, g, b, 0, 0, r, g + 1 - p, b, 0, 0, r, g, b + 1 - p, 0, 0, 0, 0, 0, 1, 0, ],这个是怎么算的呀

    作者回复: 这个你再仔细想一下,不是很难哦

    2020-12-16
    2
  • 极小福
    这节的内容很实用、也很深入,值得多看几遍,感谢
    2020-09-17
    3
  • Mingzhang
    真的是干货满满,谢谢!
    2020-08-10
    1
  • 胖橘猫
    如果实时进行滤镜操作那么大的数组遍历没有性能问题吗?有解决思路吗?
    2022-03-06
  • 式溪Chon W. Lam
    老师,不太明白最后高斯糢糊部分,可否加些注释
    2021-07-08
  • 番薯
    小试牛刀之图片局部放大器:https://github.com/sfyan/Pixel-Zoom
    2021-02-14
收起评论
显示
设置
留言
8
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部