Canvas 操作图像像素 #12
Open
Canvas 操作图像像素 #12
Comments
很赞,学习了! |
This was referenced Sep 22, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Canvas 操作图像像素
HTML5 中最吸引我的新标签就是 canvas,canvas 元素为我们操作图像带来了更多的可能。
## ImageData 对象
canvas 元素给我们提供了一系列绘制 2d 图像的 API,比如绘制一个正方形或者一个椭圆等,同时我们也可以利用
getImageData()
方法返回的ImageData
对象,获取一个图像的像素点。getImageData()
方法的参数说明getImageData()
方法返回的ImageData
对象包含下列三个属性:ImageData
对象的 width 与 height 属性是只读的。ImageData
对象的data
属性是一个数组,具有 4 * width * height 的整数值。因为每个像素点包含 4 个整数值,即RGBA
值。拿到了像素点的值,我们就能够对图像进行操作了。
getImageData()
方法只能获取同源图片的像素信息哦## 遍历像素点
我们从
ImageData
的 data 属性中遍历图像的像素点:由于每个像素点的
RGBA
四个数值都依次存放在data
属性中,所以我们需要将4个数值一组放在循环体中,以明确当前像素点的RGBA
值。这种方法的好处在于可以明确的知道某个像素点的
RGBA
值,缺点也很明显,无法直观的获取像素点所在的行和列。更加重要的是在只需要对行或列进行相关计算的时候,每个像素的遍历会造成很多重复计算,按行与列遍历像素点的方法可以弥补这些缺点:## 简易效果实现
学会了遍历像素点,我们可以对其修改,达到一些出乎意料的效果。这里我们使用 YIXUNFE 的 LOGO 图做一些效果介绍。
原图:

#### 反相
反相效果就是用 255 减去每个像素点的
RGB
值。实现的效果如图:
#### 黑白
黑白效果的特征就是像素点的
RGB
三个值相同。实现的效果如图:
#### 模糊
模糊效果是通过获取当前像素点周围的点的
RGB
各平均值实现。这里我们仅通过当前像素点的周围8格实现该效果。### [查看更多效果](http://yixunfe.github.io/blog/demo/12.html)
## Thanks
The text was updated successfully, but these errors were encountered: