提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

canvas 获取像素点-Canvas系列之滤镜效果

获取 系列 效果 Canvas 滤镜 像素点
2023-06-13 09:16:23 时间

  Canvas系列之滤镜效果,省略,像素,绘制,代码,图片

  Canvas系列之滤镜效果

  易采站长站，站长之家为您整理了Canvas系列之滤镜效果的相关内容。

  Canvas 真的是一个神奇的东西，不仅能够绘制各种图形、文本和位图，还能够对位图进行复杂的像素运算和处理。因此像滤镜这些东西，其实 Canvas 也可以来实现。接下来，是见证奇迹的时刻。

  首先，我们需要有一个 Canvas 容器canvas 获取像素点，例如：

  接下来，我们需要将使用 Canvas 来绘制一张图片:

    var myCanvas = document.getElementById("myCanvas");    var ctx = myCanvas.getContext("2d");    var img = new Image();    img.src = "./images/1526010092000.jpg"; // 自备图片链接    img.onload = (e) => {    ctx.drawImage(img, 0, 0, 800, 800); // 第一个800表示绘制图片的宽，第二个800表示绘制图片的高    }

  Canvas首次绘制的效果

  再接下来就是对图片的像素进行一些操作。而要实现这样的操作canvas 获取像素点，首先需要从 Canvas 获取到图片的像素信息，而获取这些信息可以通过

getImageData()

  来实现。

    // ... 省略前面代码    img.onload = (e) => {    // ... 省略前面代码    img = ctx.getImageData(0, 0, 800, 800); // 获得包含每个像素点颜色的字节数据    }

  由于图片的大小为 800 * 800，因为要对像素点进行遍历，以获得每一个像素点的红、绿、蓝色值。因此：

    // ... 省略前面代码    img.onload = (e) => {    // ... 省略前面代码    var pixelLen = 800 * 800; // 获得像素个数    for(var i = 0; i < pixelLen * 4; i += 4) {    var redC = img.data[i], // 第一个字节单位代表红色    greenC = img.data[i + 1], // 第二个字节单位代表绿色    blueC = img.data[i + 2], // 第三个字节单位代表蓝色    alpha = img.data[i + 3]; // 第四个字节单位代表透明度    }    }

  通过上面循环，我们获取到了包含在图片数据中的每个像素点的具体色值；需要注意的一点是，每一个像素点的数据不是一位，而是相邻的四位，分别代表了该点的红、绿、蓝和透明值。因此，实际上位图字节数据的数组长度等于像素点个数乘以 4，在 for 循环中我们也针对这一特性进行了相应处理。

  通过将每一点的红、绿、蓝值进行平均，然后再将生成的平均值相同地赋予该像素点的红、绿、蓝值，就能形成灰度效果，最后通过 以上就是关于对Canvas系列之滤镜效果的详细介绍。欢迎大家对Canvas系列之滤镜效果内容提出宝贵意见

本文共 588 个字数,平均阅读时长 ≈ 2分钟

相关文章