Utilisez le canevas pour obtenir des effets de filtre d'image avec les compétences du didacticiel demonstration

Utilisez le canevas pour obtenir des effets de filtre d'image avec les compétences du didacticiel demonstration_html5

WBOY

Libérer： 2016-05-16 15:48:46

original

1830 Les gens l'ont consulté

Il s'agit d'un effet spécial très intéressant, simulant l'effet granuleux en forme de point qui apparaît lorsqu'une caméra capture un écran de télévision. La taille des particules est réalisée grâce à la matrice de transformation et peut être ajustée arbitrairement. Les amis intéressés par la recherche peuvent essayer plus d'effets. Le code n'a pas été optimisé et n'est qu'une démonstration approximative. Vous pouvez l'améliorer vous-même.

1. Obtenir les données d'image

Copier le code

Le code est tel que suit :

img.src = 'http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg'
canvas.width = img.width ;
canvas.height = img.height;
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0); context.getImageData (0, 0, canvas.width, canvas.height);

2 Définir la matrice de filtre

Copier le codeLe code est le suivant :

var m_VideoType=0; >switch (m_VideoType)
{
case0://VIDEO_TYPE.VIDEO_STAGGERED :
{
motif = [
0, 1,
0, 2,
1, 2 ,
1, 0 ,
2, 0,
2, 1,
];
pause; {
modèle = [
0,
1,
2,
];
break;
case2://VIDEO_TYPE.VIDEO_3X3 :
{
modèle =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
]; }
par défaut :
{
modèle =
[
0, 1, 2, 0, 0,
1, 1, 1, 2, 0,
0, 1, 2, 2, 2 ,
0, 0, 1, 2, 0,
0, 1, 1, 1, 2,
2, 0, 1, 2, 2,
0, 0, 0, 1 , 2,
2, 0, 1, 1, 1,
2, 2, 0, 1, 2,
2, 0, 0, 0, 1,
1, 2, 0, 1, 1,
2, 2, 2, 0, 1,
1, 2, 0, 0, 0,
1, 1, 2, 0, 1 ,
1, 2, 2, 2, 0,
];
break;
}
var pattern_width = [ 2, 1, 3, 5 ]; >var pattern_height = [6, 3, 3, 15 ];

3. Obtenir des données filtrées

Copier le code

Le code est le suivant :
for ( var x = 0; x < canvasData.width; x ) {
for ( var y = 0; y < canvasData. height; y ) {

// Index du pixel dans le tableau

var idx = (x y * canvasData.width) * 4; .data[idx 0]; var g = canvasData.data[idx 1]; var b = canvasData.data[idx 2]; var nWidth = pattern_width[m_VideoType]; nHeight = pattern_height[m_VideoType]; var index = nWidth * (y % nHeight) (x % nWidth)

index = pattern[index]; r = fclamp0255(2 * r);

if (index == 1)

var g = fclamp0255(2 * g);
if (index == 2)
var b = fclamp0255( 2 * b);
// attribuer une valeur d'échelle de gris
canvasData.data[idx 0] = r; // Canal rouge
canvasData.data[idx 1] = g; >canvasData.data[idx 2] = b ; // Canal bleu
canvasData.data[idx 3] = 255; // Canal Alpha
// Ajouter une bordure noire
if(x < 8 | | y < 8 || x > (canvasData.width - 8) || (canvasData.height - 8))
{
canvasData.data[idx 0] = 0; canvasData.data[idx 1] = 0;
canvasData.data[idx 2] = 0;
}
}
}

4. données filtrées

Copier le code

Le code est le suivant :

contexte .putImageData(canvasData, 0, 0 );

5. Documents de référence

Projet open source Dai Zhenjun ImageFilter