Verwenden Sie Canvas, um Bildfiltereffekte mit den Fähigkeiten des Demonstrations-HTML5-Tutorials zu erzielen

Dies ist ein sehr interessanter Spezialeffekt, der den punktförmigen Körnungseffekt simuliert, der auftritt, wenn eine Kamera einen Fernsehbildschirm aufnimmt. Die Größe der Partikel wird durch die Transformationsmatrix realisiert und kann beliebig angepasst werden. Der Code wurde nicht optimiert und ist nur eine grobe Demo.

1. Bilddaten abrufen

Code kopieren

Der Code ist wie folgt folgt:

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

2. Legen Sie die Filtermatrix fest

Code kopierenDer Code lautet wie folgt:

var m_VideoType=0;

var pattern=new Array(); >switch (m_VideoType)
{
case0://VIDEO_TYPE.VIDEO_STAGGERED:
{
pattern = [
0, 1,
0, 2,
1, 2 ,
1, 0 ,
2, 0,
2, 1,
];
break;
}
case1://VIDEO_TYPE.VIDEO_TRIPED:
{
pattern = [
0,
1,
2,
];
break;
}
case2://VIDEO_TYPE.VIDEO_3X3:
{
pattern =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
break; }
Standard:
{
Muster =
[
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, 0,
];
break;
}
var pattern_width = [ 2, 1, 3, 5 ]; >var pattern_height = [6, 3, 3, 15 ];



3. Gefilterte Daten abrufen

Code kopieren

Der Code lautet wie folgt:

for ( var x = 0; x < canvasData.width; x ) { for ( var y = 0; y < canvasData height; .data[idx 0]; var g = canvasData.data[idx 1];

var b = canvasData.data[idx 2]; nHeight = pattern_height[m_VideoType];

var index = nWidth * (y % nHeight) (x % nWidth);

if (index == 0)
var r = fclamp0255(2 * r);if (index == 1)
var g = fclamp0255(2 * g);
if (index == 2)
var b = fclamp0255( 2 * b);
// Graustufenwert zuweisen
canvasData.data[idx 0] = r; // Roter Kanal
canvasData.data[idx 1] = g; // Grüner Kanal
canvasData.data[idx 2] = b ; // Blauer Kanal
canvasData.data[idx 3] = 255; // Alpha-Kanal
// Schwarzen Rand hinzufügen
if(x < 8 | |. y < 8 ||. x > (canvasData.height - 8)) canvasData.data[idx 1] = 0;
canvasData.data[idx 2] = 0;
}
}



4 gefilterte Daten






Code kopieren


Der Code lautet wie folgt:


Kontext .putImageData(canvasData, 0, 0 );

5. Referenzmaterialien

Dai Zhenjun ImageFilter Open Source-Projekt