Example of how JavaScript Blur Images

This article mainly introduces how to blur JavaScript images. In this article, we will give a brief introduction and a complete example code. If you need it, you can refer to it for reference. Let's take a look at it. Preface

As we all know, a complete image consists of three channels: Red, green, and blue. The thumbnail of the red, green, and blue channels is displayed in gray scale. Different gray levels are used to represent the proportion of "Red, green, and blue" in the image. The pure white in the channel indicates that the color light is the highest brightness and the brightness level is 255.

Blur method:

It is to extract the R (G, B) of a pixel and the R (G, B) of the pixel around it, and then take the average value and assign it to the R (G, B) of the pixel ); this completes the fuzzy process;

Example:

1 2 3

4 5 6

7 8 9

For example, if this pixel is 5, the R (G, B) of the Five pixel points and the eight surrounding pixels (1, 2, 3, 4, 6, 7, 8, 9) are taken out, take the average value of the nine points and assign them to the five pixels.

R (5) = (R1 + R2 + R3 + R4 + R5 + R6 + R7 + R8 + R9)/9;

G (5) = (G1 + G2 + G3 + G4 + G5 + G6 + G7 + G8 + G9)/9;

B (5) = (B1 + B2 + B3 + B4 + B5 + B6 + B7 + B8 + B9)/9;

:

Instance code

            
         ImgBase                                        

        
                    
        
 
  
Your browser does not support canvas!
 Script function Fuzzy () {var c = document. getElementById ("canvas"); var ctx = c. getContext ("2d"); var imgData = ctx. getImageData (0, 0, c. width, c. height); var img_w = imgData. width; var img_h = imgData. height; for (var w = 1; w <(img_w-1); w ++) {for (var h = 1; h <(img_h-1); h ++) {// start point var I = (w + img_w * h) * 4; var R = imgData. data [i-1604] + imgData. data [i-1600] + imgData. data [i-1596] + imgData. data [I-4] + imgData. data [I] + img Data. data [I + 4] + imgData. data [I + 1596] + imgData. data [I + 1600] + imgData. data [I + 1604]; // R (0-255) var G = imgData. data [i-1603] + imgData. data [i-1599] + imgData. data [i-1595] + imgData. data [I-3] + imgData. data [I + 1] + imgData. data [I + 5] + imgData. data [I + 1597] + imgData. data [I + 1601] + imgData. data [I + 1605]; // G (0-255) var B = imgData. data [i-1602] + imgData. data [i-1598] + imgData. data [i-1594] + imgData. data [I-2] + imgData. data [I + 2] + I MgData. data [I + 6] + imgData. data [I + 1598] + imgData. data [I + 1602] + imgData. data [I + 1606]; // G (0-255) var Alpha = imgData. data [I + 3]; // Alpha (0-255) imgData. data [I] = R/9; imgData. data [I + 1] = G/9; imgData. data [I + 2] = B/9; imgData. data [I + 3] = Alpha ;}} ctx. putImageData (imgData, 400);} var c_w = 300; var c_h =; // loaded img image function loadImg () {var img = document. getElementByI D ("scream"); var file = document. querySelector ('input [type = file] '). files [0]; if (! /Image \/\ w +/. test (file. type) {alert ("the file must be an image! "); Return false;} var reader = new FileReader (); reader. addEventListener ("load", function () {img. src = reader. result ;}, false); if (file) {reader. readAsDataURL (file); loadCanvas () ;}// load the canvas image function loadCanvas () {var c = document. getElementById ("canvas"); var ctx = c. getContext ("2d"); var img = document. getElementById ("scream"); img. onload = function () {ctx. drawImage (img, 0, 0, c_w, c_h);} script

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.

For more articles about examples of JavaScript-Based Image Blur methods, refer to PHP!