Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Image blur algorithm code sharing implemented in JavaScript_javascript skills

Image blur algorithm code sharing implemented in JavaScript_javascript skills

WBOY
Release： 2016-05-16 16:51:40
Original
1651 people have browsed it

HTML5 blurred images need to be used in the project. In the past, GDI was used. There are ready-made components in GDI to implement it. How to implement it in HTML5?
1.createImageData()
2.getImageData()
3.putImageData()
The above three functions can be implemented. For usage and secrets, please go to Baidu yourself. I will not repeat the description. Doesn't make much sense.

The following is the JS that implements the fuzzy algorithm. In fact, there is another 2B level algorithm which is the distribution matrix, which increases the efficiency many times, but the effect is very poor and the feathering effect is not strong.
Implementation code:

Copy code The code is as follows:

var mul_table = [
        512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,
        454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,
        482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,
        437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,
        497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,
        320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,
        446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,
        329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,
        505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,
        399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,
        324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,
        268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,
        451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,
        385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,
        332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,
        289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];

  
var shg_table = [
         9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,
        17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
        19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
        20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
        21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
        21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
        22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
        22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23,
        23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
        23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
        23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
        23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
        24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
        24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
        24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
        24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ];

function stackBlurImage( imageID, canvasID, radius, blurAlphaChannel )
{

     var img = document.getElementById( imageID );
    var w = img.naturalWidth;
    var h = img.naturalHeight;

    var canvas = document.getElementById( canvasID );

    canvas.style.width  = w + "px";
    canvas.style.height = h + "px";
    canvas.width = w;
    canvas.height = h;

    var context = canvas.getContext("2d");
    context.clearRect( 0, 0, w, h );
    context.drawImage( img, 0, 0 );

    if ( isNaN(radius) || radius < 1 ) return;

if ( blurAlphaChannel )
stackBlurCanvasRGBA( canvasID, 0, 0, w, h, radius );
else
stackBlurCanvasRGB( canvasID, 0, 0, w, h, radius );
}


function stackBlurCanvasRGBA( id, top_x, top_y, width, height, radius )
{
    if ( isNaN(radius) || radius < 1 ) return;
    radius |= 0;

    var canvas  = document.getElementById( id );
    var context = canvas.getContext("2d");
    var imageData;

    try {
      try {
        imageData = context.getImageData( top_x, top_y, width, height );
      } catch(e) {

    
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
            imageData = context.getImageData( top_x, top_y, width, height );
        } catch(e) {
            alert("Cannot access local image");
            throw new Error("unable to access local image data: " e);
            return;
        }
      }
    } catch(e) {
      alert("Cannot access image");
      throw new Error("unable to access image data: " e);
    }

    var pixels = imageData.data;

    var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum,
    r_out_sum, g_out_sum, b_out_sum, a_out_sum,
    r_in_sum, g_in_sum, b_in_sum, a_in_sum,
    pr, pg, pb, pa, rbs;

    var div = radius radius 1;
    var w4 = width << 2;
    var widthMinus1  = width - 1;
    var heightMinus1 = height - 1;
    var radiusPlus1  = radius 1;
    var sumFactor = radiusPlus1 * ( radiusPlus1 1 ) / 2;

    var stackStart = new BlurStack();
    var stack = stackStart;
    for ( i = 1; i < div; i )
    {
        stack = stack.next = new BlurStack();
        if ( i == radiusPlus1 ) var stackEnd = stack;
    }
    stack.next = stackStart;
    var stackIn = null;
    var stackOut = null;

    yw = yi = 0;

    var mul_sum = mul_table[radius];
    var shg_sum = shg_table[radius];

    for ( y = 0; y < height; y )
    {
        r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;

        r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
        g_out_sum = radiusPlus1 * ( pg = pixels[yi 1] );
        b_out_sum = radiusPlus1 * ( pb = pixels[yi 2] );
        a_out_sum = radiusPlus1 * ( pa = pixels[yi 3] );

        r_sum = sumFactor * pr;
        g_sum = sumFactor * pg;
        b_sum = sumFactor * pb;
        a_sum = sumFactor * pa;

        stack = stackStart;

        for( i = 0; i < radiusPlus1; i )
        {
            stack.r = pr;
            stack.g = pg;
            stack.b = pb;
            stack.a = pa;
            stack = stack.next;
        }

        for( i = 1; i < radiusPlus1; i )
        {
            p = yi (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
            r_sum = ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
            g_sum = ( stack.g = ( pg = pixels[p 1])) * rbs;
            b_sum = ( stack.b = ( pb = pixels[p 2])) * rbs;
            a_sum = ( stack.a = ( pa = pixels[p 3])) * rbs;

            r_in_sum = pr;
            g_in_sum = pg;
            b_in_sum = pb;
            a_in_sum = pa;

            stack = stack.next;
        }

       
        stackIn = stackStart;
        stackOut = stackEnd;
        for ( x = 0; x < width; x )
        {
            pixels[yi 3] = pa = (a_sum * mul_sum) >> shg_sum;
            if ( pa != 0 )
            {
                pa = 255 / pa;
                pixels[yi]   = ((r_sum * mul_sum) >> shg_sum) * pa;
                pixels[yi 1] = ((g_sum * mul_sum) >> shg_sum) * pa;
                pixels[yi 2] = ((b_sum * mul_sum) >> shg_sum) * pa;
            } else {
                pixels[yi] = pixels[yi 1] = pixels[yi 2] = 0;
            }

            r_sum -= r_out_sum;
            g_sum -= g_out_sum;
            b_sum -= b_out_sum;
            a_sum -= a_out_sum;

            r_out_sum -= stackIn.r;
            g_out_sum -= stackIn.g;
            b_out_sum -= stackIn.b;
            a_out_sum -= stackIn.a;

            p =  ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;

r_in_sum += ( stackIn.r = pixels[p]);
g_in_sum += ( stackIn.g = pixels[p+1]);
b_in_sum += ( stackIn.b = pixels[p+2]);
a_in_sum += ( stackIn.a = pixels[p+3]);

r_sum += r_in_sum;
g_sum += g_in_sum;
b_sum += b_in_sum;
a_sum += a_in_sum;

stackIn = stackIn.next;

r_out_sum += ( pr = stackOut.r );
g_out_sum += ( pg = stackOut.g );
b_out_sum += ( pb = stackOut.b );
a_out_sum += ( pa = stackOut.a );

r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
a_in_sum -= pa;

stackOut = stackOut.next;

yi += 4;
}
yw += width;
}

   
    for ( x = 0; x < width; x )
    {
        g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;

        yi = x << 2;
        r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
        g_out_sum = radiusPlus1 * ( pg = pixels[yi 1]);
        b_out_sum = radiusPlus1 * ( pb = pixels[yi 2]);
        a_out_sum = radiusPlus1 * ( pa = pixels[yi 3]);

        r_sum = sumFactor * pr;
        g_sum = sumFactor * pg;
        b_sum = sumFactor * pb;
        a_sum = sumFactor * pa;

        stack = stackStart;

        for( i = 0; i < radiusPlus1; i )
        {
            stack.r = pr;
            stack.g = pg;
            stack.b = pb;
            stack.a = pa;
            stack = stack.next;
        }

        yp = width;

        for( i = 1; i <= radius; i )
        {
            yi = ( yp x ) << 2;

            r_sum = ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
            g_sum = ( stack.g = ( pg = pixels[yi 1])) * rbs;
            b_sum = ( stack.b = ( pb = pixels[yi 2])) * rbs;
            a_sum = ( stack.a = ( pa = pixels[yi 3])) * rbs;

            r_in_sum = pr;
            g_in_sum = pg;
            b_in_sum = pb;
            a_in_sum = pa;

            stack = stack.next;

            if( i < heightMinus1 )
            {
                yp = width;
            }
        }

        yi = x;
        stackIn = stackStart;
        stackOut = stackEnd;
        for ( y = 0; y < height; y )
        {
            p = yi << 2;
            pixels[p 3] = pa = (a_sum * mul_sum) >> shg_sum;
            if ( pa > 0 )
            {
                pa = 255 / pa;
                pixels[p]   = ((r_sum * mul_sum) >> shg_sum ) * pa;
                pixels[p 1] = ((g_sum * mul_sum) >> shg_sum ) * pa;
                pixels[p 2] = ((b_sum * mul_sum) >> shg_sum ) * pa;
            } else {
                pixels[p] = pixels[p 1] = pixels[p 2] = 0;
            }

            r_sum -= r_out_sum;
            g_sum -= g_out_sum;
            b_sum -= b_out_sum;
            a_sum -= a_out_sum;

            r_out_sum -= stackIn.r;
            g_out_sum -= stackIn.g;
            b_out_sum -= stackIn.b;
            a_out_sum -= stackIn.a;

            p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;

r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3]));

stackIn = stackIn.next;

r_out_sum += ( pr = stackOut.r );
g_out_sum += ( pg = stackOut.g );
b_out_sum += ( pb = stackOut.b );
a_out_sum += ( pa = stackOut.a );

r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
a_in_sum -= pa;

stackOut = stackOut.next;

yi += width;
}
}

context.putImageData( imageData, top_x, top_y );

}


function stackBlurCanvasRGB( id, top_x, top_y, width, height, radius )
{
    if ( isNaN(radius) || radius < 1 ) return;
    radius |= 0;

    var canvas  = document.getElementById( id );
    var context = canvas.getContext("2d");
    var imageData;

    try {
      try {
        imageData = context.getImageData( top_x, top_y, width, height );
      } catch(e) {

 
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
            imageData = context.getImageData( top_x, top_y, width, height );
        } catch(e) {
            alert("Cannot access local image");
            throw new Error("unable to access local image data: " e);
            return;
        }
      }
    } catch(e) {
      alert("Cannot access image");
      throw new Error("unable to access image data: " e);
    }

    var pixels = imageData.data;

    var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum,
    r_out_sum, g_out_sum, b_out_sum,
    r_in_sum, g_in_sum, b_in_sum,
    pr, pg, pb, rbs;

    var div = radius radius 1;
    var w4 = width << 2;
    var widthMinus1  = width - 1;
    var heightMinus1 = height - 1;
    var radiusPlus1  = radius 1;
    var sumFactor = radiusPlus1 * ( radiusPlus1 1 ) / 2;

    var stackStart = new BlurStack();
    var stack = stackStart;
    for ( i = 1; i < div; i )
    {
        stack = stack.next = new BlurStack();
        if ( i == radiusPlus1 ) var stackEnd = stack;
    }
    stack.next = stackStart;
    var stackIn = null;
    var stackOut = null;

    yw = yi = 0;

    var mul_sum = mul_table[radius];
    var shg_sum = shg_table[radius];

    for ( y = 0; y < height; y )
    {
        r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;

        r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
        g_out_sum = radiusPlus1 * ( pg = pixels[yi 1] );
        b_out_sum = radiusPlus1 * ( pb = pixels[yi 2] );

        r_sum = sumFactor * pr;
        g_sum = sumFactor * pg;
        b_sum = sumFactor * pb;

        stack = stackStart;

        for( i = 0; i < radiusPlus1; i )
        {
            stack.r = pr;
            stack.g = pg;
            stack.b = pb;
            stack = stack.next;
        }

for( i = 1; i < radiusPlus1; i++ )
{
p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;

r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;

stack = stack.next;
}


stackIn = stackStart;
stackOut = stackEnd;
for ( x = 0; x < width; x++ )
{
pixels[yi] = (r_sum * mul_sum) >> shg_sum;
            pixels[yi+1] = (g_sum * mul_sum) >> shg_sum;
            pixels[yi+2] = (b_sum * mul_sum) >> shg_sum;

            r_sum -= r_out_sum;
            g_sum -= g_out_sum;
            b_sum -= b_out_sum;

            r_out_sum -= stackIn.r;
            g_out_sum -= stackIn.g;
            b_out_sum -= stackIn.b;

            p =  ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;

r_in_sum += ( stackIn.r = pixels[p]);
g_in_sum += ( stackIn.g = pixels[p+1]);
b_in_sum += ( stackIn.b = pixels[p+2]);

r_sum += r_in_sum;
g_sum += g_in_sum;
b_sum += b_in_sum;

stackIn = stackIn.next;

r_out_sum += ( pr = stackOut.r );
g_out_sum += ( pg = stackOut.g );
b_out_sum += ( pb = stackOut.b );

r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;

stackOut = stackOut.next;

yi += 4;
}
yw += width;
}

   
    for ( x = 0; x < width; x )
    {
        g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;

        yi = x << 2;
        r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
        g_out_sum = radiusPlus1 * ( pg = pixels[yi 1]);
        b_out_sum = radiusPlus1 * ( pb = pixels[yi 2]);

        r_sum = sumFactor * pr;
        g_sum = sumFactor * pg;
        b_sum = sumFactor * pb;

        stack = stackStart;

        for( i = 0; i < radiusPlus1; i )
        {
            stack.r = pr;
            stack.g = pg;
            stack.b = pb;
            stack = stack.next;
        }

        yp = width;

        for( i = 1; i <= radius; i )
        {
            yi = ( yp x ) << 2;

            r_sum = ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
            g_sum = ( stack.g = ( pg = pixels[yi 1])) * rbs;
            b_sum = ( stack.b = ( pb = pixels[yi 2])) * rbs;

            r_in_sum = pr;
            g_in_sum = pg;
            b_in_sum = pb;

            stack = stack.next;

            if( i < heightMinus1 )
            {
                yp = width;
            }
        }

        yi = x;
        stackIn = stackStart;
        stackOut = stackEnd;
        for ( y = 0; y < height; y )
        {
            p = yi << 2;
            pixels[p]   = (r_sum * mul_sum) >> shg_sum;
            pixels[p 1] = (g_sum * mul_sum) >> shg_sum;
            pixels[p 2] = (b_sum * mul_sum) >> shg_sum;

            r_sum -= r_out_sum;
            g_sum -= g_out_sum;
            b_sum -= b_out_sum;

            r_out_sum -= stackIn.r;
            g_out_sum -= stackIn.g;
            b_out_sum -= stackIn.b;

            p = ( x (( ( p = y radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;

            r_sum = ( r_in_sum = ( stackIn.r = pixels[p]));
            g_sum = ( g_in_sum = ( stackIn.g = pixels[p 1]));
            b_sum = ( b_in_sum = ( stackIn.b = pixels[p 2]));

            stackIn = stackIn.next;

            r_out_sum = ( pr = stackOut.r );
            g_out_sum = ( pg = stackOut.g );
            b_out_sum = ( pb = stackOut.b );

            r_in_sum -= pr;
            g_in_sum -= pg;
            b_in_sum -= pb;

            stackOut = stackOut.next;

            yi = width;
        }
    }

    context.putImageData( imageData, top_x, top_y );

}

function BlurStack()
{
    this.r = 0;
    this.g = 0;
    this.b = 0;
    this.a = 0;
    this.next = null;
}

使用方法：

复制代码 代码如下:
stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );
stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius );
stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius );
Related labels：
javascript
source：php.cn
Previous article：JS uses the getComputedStyle() method to obtain CSS attribute values_javascript tips Next article：JavaScript closure examples explained_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template