[Canvas into Pit 2] blur effect

To see the effect please go to http://philippica.github.io/click Blur

The fuzzy effect is better should be Gaussian blur, the value of a point into a circle centered on the point of all the pixels of the weighted average, the weights are calculated by two-dimensional normal distribution

Previously used QT to achieve a Gaussian blur, but JS speed can not be compared with C + +, in order to achieve a better effect, here in the efficiency and effect of a compromise, the value of each point is equal to the point of the square in the center of the average value of all the pixels

The advantage of this is that the computation is fast and the matrix is naturally stored in a square, so the value of each pixel can be quickly obtained by the preprocessing of an O (Canvaswidth * canvasheight).

The specific method should be ACM in a rotten Way, Sum[i][j] with (I,J) to the bottom right corner of the canvas in the upper left to all the value of the channel, so the canvas of any rectangle and can be a similar to the method of Repulsion O (1) to get

Pre-processed code:

1     varPpimgdata = context.getimagedata (0, 0, Ppcanvaswidth, ppcanvasheight);2     varPpdata =Ppimgdata.data;3     varPptemp =Ppdata;4     varRadius = 0;5     varLength =ppdata.length;6$ (' #range '). attr ("value", 0);7      for(vari = 0; i < ppcanvasheight; i++)8     {9          for(varj = 0; J < Ppcanvaswidth; J + +)Ten         { One             varPosition = i * ppcanvaswidth +J; A             varx = (position) * 4; -Sumr[position] =Ppdata[x]; -Sumg[position] = ppdata[x + 1]; theSumb[position] = ppdata[x + 2]; -             if(I! = 0) -             { -Sumr[position] + = sumr[position-Ppcanvaswidth]; +Sumg[position] + = sumg[position-Ppcanvaswidth]; -Sumb[position] + = sumb[position-Ppcanvaswidth]; +             } A             if(J! = 0) at             { -Sumr[position] + = sumr[position-1]; -Sumg[position] + = sumg[position-1]; -Sumb[position] + = sumb[position-1]; -             } -             if(I! = 0 && J! = 0) in             { -Sumr[position]-= sumr[position-ppcanvaswidth-1]; toSumg[position]-= sumg[position-ppcanvaswidth-1]; +Sumb[position]-= sumb[position-ppcanvaswidth-1]; -             } the         } *}

SUMR SUMG Sumb has a pre-processing value of three channels, radius represents the blur radius

Specific calculation of the fuzzy code:

1     functionPpblur ()2     {3         varArea = (radius + radius + 1) * (radius + radius + 1);4          for(vari = 0; i < ppcanvasheight; i++)5         {6              for(varj = 0; J < Ppcanvaswidth; J + +)7             {8                 varPosition = i * ppcanvaswidth +J;9                 varx = (position) * 4;Ten                 vartt = (i + radius) * Ppcanvaswidth + j +radius; One                 varTT2 = (i-radius-1) * ppcanvaswidth + j +radius; A                 varTT3 = (i + radius) * ppcanvaswidth + j-radius-1; -                 varTt4 = (i-radius-1) * ppcanvaswidth + j-radius-1; -PPTEMP[X] = (Sumr[tt]-sumr[tt2]-SUMR[TT3] + SUMR[TT4])/Area ; thePptemp[x + 1] = (Sumg[tt]-sumg[tt2]-SUMG[TT3] + SUMG[TT4])/Area ; -Pptemp[x + 2] = (Sumb[tt]-sumb[tt2]-SUMB[TT3] + SUMB[TT4])/Area ;  -             } -         } +Ppdata =pptemp; -Context.putimagedata (ppimgdata, 0, 0); +}

SUMR[TT]-SUMR[TT2]-SUMR[TT3] + SUMR[TT4] is the sum of the R channels in the square, divided by the total number of pixels within the region is the mean

Summary: Boundary processing is not good, at the edge of the picture will be significantly darkened, mainly in the area of the boundary changes.

[Canvas into Pit 2] blur effect