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

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

Déclaration：

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