communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Partage de code de l'algorithme de flou d'image implémenté dans les compétences JavaScript_javascript

Partage de code de l'algorithme de flou d'image implémenté dans les compétences JavaScript_javascript

WBOY
Libérer： 2016-05-16 16:51:40
original
1653 Les gens l'ont consulté

Les images floues HTML5 doivent être utilisées dans le projet. Dans le passé, GDI était utilisé. Il existe des composants prêts à l'emploi dans GDI pour l'implémenter en HTML5.
1.createImageData()
2.getImageData()
3.putImageData()
Les trois fonctions ci-dessus peuvent être implémentées Pour l'utilisation et les secrets, veuillez vous rendre sur Baidu, je ne le répéterai pas. la description. Cela n'a pas beaucoup de sens.

Ce qui suit est le JS qui implémente l'algorithme flou. En fait, il existe un autre algorithme de niveau 2B qui est la matrice de distribution, qui augmente l'efficacité plusieurs fois, mais l'effet est très faible et l'effet de mise en drapeau n'est pas fort.
Code d'implémentation :

Copier le code Le code est le suivant :

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) {

    
        essayez {
             netscape.security.PrivilegeManager.enablePrivilege( "UniversalBrowserRead");
            imageData = context.getImageData( top_x, top_y, width, height );
        } catch(e) {
             alert("Impossible d'accéder à l'image locale");
            throw new Erreur("impossible d'accéder aux données d'image locales : " e);
             return;
        }
      }
    } catch(e) {
      alert("Impossible d'accéder à l'image");
      lancer une nouvelle erreur ("impossible d'accéder aux données d'image : " 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, 🎜>
    var div = rayon rayon 1 ;
    var w4 = largeur << 2;
    var widthMinus1  = largeur - 1;
    var heightMinus1 = hauteur - 1;
    var radiusPlus1  = rayon 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];

    pour ( y = 0; y < hauteur; 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 = Commencer ;

        pour (i = 0; je &Lt ; rayonPlus1 ; i )
        {
            stack.r = pr;
            stack.g = pg;
            stack.b = pb;
            stack.a;
            stack = stack.next ;
        }

        pour ( 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;
        pour ( 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 &g) t;> 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;
}

< yi = x ≪&Lt ; 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 = largeur ;

        pour ( i = 1; i <= rayon; 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 ;
        pour ( y = 0; y < hauteur; 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) {

 
        essayez {
            netscape.security.PrivilegeManager.enablePrivilege( "UniversalBrowserRead");
            imageData = context.getImageData( top_x, top_y, width, height );
        } catch(e) {
             alert("Impossible d'accéder à l'image locale");
            throw new Erreur("impossible d'accéder aux données d'image locales : " e);
             return;
        }
      }
    } catch(e) {
      alert("Impossible d'accéder à l'image");
      lancer une nouvelle erreur ("impossible d'accéder aux données d'image : " 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 = rayon rayon 1;
    var w4 = largeur << 2;
    var widthMinus1  = largeur - 1;
    var heightMinus1 = hauteur - 1;
    var radiusPlus1  = rayon 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];

    pour ( y = 0; y < hauteur; 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 = rayonPlus1 * ( 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; je &Lt ; rayonPlus1 ; i )
        {
            stack.r = pr;
            stack.g = pg;
            stack.b = pb;
            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;
}

< ;&Lt ; 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;

        stackStart;

        pour( i = 0; i < rayonPlus1; i )
        {
            pile.r = pr;
            pile.g = pg;
            pile.b = pb;
            pile = pile .suivant ;
        }

        yp = largeur;

        for( i = 1; i <= rayon; i )
        {
             yi = ( yp x ) < &Lt ; 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 =    b_in_sum = pb;

            stack = stack.next;

            if( i < heightMinus1 )
            {
                yp =       }
        }

        yi = x;
        stackIn = stackStart;
        stackOut = stackEnd;
             p = oui ≪≪ 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_out_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 );

>

fonction 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 );

Étiquettes associées：
javascript
source：php.cn
Article précédent：JS utilise la méthode getComputedStyle() pour obtenir des conseils sur les valeurs des attributs CSS_javascript Article suivant：Exemples de fermeture JavaScript expliqué_compétences Javascript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal