12 | 如何使用滤镜函数实现美颜效果？
月影
该思维导图由 AI 生成，仅供参考
你好，我是月影。
通过前面的课程，我们初步了解了浏览器的图形系统，也学会了使用基本的数学和几何方法来生成和处理图像，还能用简单的图形组合来构成复杂的图案。从这一节课开始，我们进入一个新的模块，开始学习像素处理。
在可视化领域里，我们常常需要处理大规模的数据，比如，需要呈现数万甚至数十万条信息在空间中的分布情况。如果我们用几何绘制的方式将这些信息一一绘制出来，性能可能就会很差。
这时，我们就可以将这些数据简化为像素点进行处理。这种处理图像的新思路就叫做像素化。在可视化应用中，图片像素化处理是一个很重要手段，它能够在我们将原始数据信息转换成图形后，进一步处理图形的细节，突出我们想要表达的信息，还能让视觉呈现更有冲击力。
因为像素化的内容比较复杂，能做的事情也非常多，所以我们会用五节课的时间来讨论。今天是第一节课，我们先来看看图片像素化的基本思路和方法，体会如何用像素化来处理照片，从而达到“美颜”的效果。
如何理解像素化？
首先，我们来理解两个基础的概念。第一个是像素化。所谓像素化，就是把一个图像看成是由一组像素点组合而成的。每个像素点负责描述图像上的一个点，并且带有这个点的基本绘图信息。那对于一张 800 像素宽、600 像素高的图片来说，整张图一共就有 48 万个像素点。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了如何利用像素处理和颜色矩阵来实现图像处理效果，重点讲解了灰度化图片的过程和颜色矩阵的应用。作者通过具体的代码示例，展示了如何使用JavaScript中的滤镜函数实现美颜效果，并提供了重构代码以扩展其他效果的思路。文章还介绍了颜色滤镜函数的结构和不同效果的实现原理，包括改变亮度、饱和度、对比度、透明度、反色和旋转色相等滤镜函数的具体实现方法。通过本文，读者可以快速了解像素处理的基本原理和实现方法，适合对图像处理感兴趣的读者阅读学习。整体而言，本文以简洁清晰的语言，结合具体的代码示例，帮助读者快速了解了像素处理的基本原理和实现方法，适合对图像处理感兴趣的读者阅读学习。文章还介绍了高斯模糊的原理和算法，以及如何利用高斯模糊实现美颜效果。此外，还探讨了像素化与CSS滤镜的应用，以及像素处理在可视化领域的灵活性和优势。通过本文，读者可以了解到像素处理的核心概念、滤镜函数、高斯模糊滤镜以及内置滤镜的应用，为进一步学习和实践提供了基础和启发。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68
《跟月影学可视化》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(8)
- 最新
- 精选
- Zacklib/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-081 
张旭老师，颜色矩阵为什么是4*5，不是4*4呢？作者回复: 实际上4*5是一个简化了最后一行的5*5的矩阵，因为4*4矩阵的仿射变换用5*5齐次矩阵来表示。这个和为什么css的transform-matix是2*3道理一样
2020-07-2131
秋谷老师，灰度矩阵那块，矩阵运算都明白了，但是最后得出的颜色矩阵[ 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-162- 极小福这节的内容很实用、也很深入，值得多看几遍，感谢2020-09-173
- Mingzhang真的是干货满满，谢谢！2020-08-101
- 胖橘猫如果实时进行滤镜操作那么大的数组遍历没有性能问题吗？有解决思路吗？2022-03-06
式溪Chon W. Lam老师，不太明白最后高斯糢糊部分，可否加些注释2021-07-08
番薯小试牛刀之图片局部放大器：https://github.com/sfyan/Pixel-Zoom2021-02-14
收起评论