Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use Canvas to achieve filter effect in html5", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use Canvas to achieve filter effect in html5" article.

Canvas is really an amazing thing that can not only draw all kinds of graphics, text and bitmaps, but also perform complex pixel operations and processing on bitmaps. So things like filters, in fact, Canvas can also be implemented. Next, it's time to witness miracles.

First, we need to have a Canvas container, such as:

Next, we need to use Canvas to draw a picture:

Var myCanvas = document.getElementById ("myCanvas"); var ctx = myCanvas.getContext ("2d"); var img = new Image (); img.src = ". / images/1526010092000.jpg"; / / self-contained picture link img.onload = (e) = > {ctx.drawImage (img, 0,0,800,800); / / the first 800 represents the width of the picture, and the second 800 represents the height of the picture.

The next step is to do some manipulation on the pixels of the picture. To achieve this operation, we first need to get the pixel information of the picture from Canvas, which can be achieved through getImageData ().

/ /... Omit the previous code img.onload = (e) = > {/ /. Omit the previous code img = ctx.getImageData (0,0,800,800); / / get byte data containing the color of each pixel}

Because the size of the picture is 800 * 800, the pixels are traversed to get the red, green, and blue values of each pixel. Therefore:

/ /... Omit the previous code img.onload = (e) = > {/ /. Omit the preceding code var pixelLen = 800 * 800; / / get the number of pixels 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 循环中我们也针对这一特性进行了相应处理。 通过将每一点的红、绿、蓝值进行平均，然后再将生成的平均值相同地赋予该像素点的红、绿、蓝值，就能形成灰度效果，最后通过 putImageData() 方法来重新绘制图片即可，代码如下： // ... 省略前面代码img.onload = (e) =>

{/ /... Omit the previous code for (var I = 0; I)

< pixelLen * 4; i += 4) { // ... 省略前面代码 var grey = parseInt((redC + greenC + blueC) / 3); // 平均后获取灰度值 img.data[i] = grey; // 改变红色值 img.data[i + 1] = grey; // 改变绿色值 img.data[i + 2] = grey; // 改变蓝色值 } ctx.putImageData(img, 0, 0, 800, 800); // 重新绘制图片} Canvas第二次绘制图片-灰度效果 透明度的控制只需要修改第四个字节单位对应的数值即可，该数值的范围为0~256，0代表完全透明，256代表完成不透明。例如： // ... 省略前面代码img.onload = (e) =>

{/ /... Omit the previous code for (var I = 0; I < pixelLen * 4; I + = 4) {/ /. Omit the previous code img.data [I + 3] = 128; / / 50% transparency} / /. Omit the previous code} above is about "how to use Canvas in html5 to achieve filter effect" of this article, I believe we all have a certain understanding, I hope the content shared by the editor will be helpful to you, if you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.