Gunakan kanvas untuk mencapai kesan penapis imej dengan kemahiran tutorial demonstration_html5

Ini ialah kesan khas yang sangat menarik, mensimulasikan kesan berbutir seperti titik yang muncul apabila kamera menangkap skrin TV. Saiz zarah direalisasikan melalui matriks transformasi dan boleh diselaraskan dengan sewenang-wenangnya.

1. Dapatkan data imej

Salin kod

Kod adalah sebagai berikut:

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.getImageData (0, 0, canvas.width, canvas.height);

2.
Salin kod

Kod adalah seperti berikut:

var m_VideoType=0; var pattern=new Array(); >tukar (m_VideoType) { kes0://VIDEO_TYPE.VIDEO_STAGGERED:

{

corak = [

0, 1,
0, 2,
1, 2 ,
1, 0 ,
2, 0,
2, 1,
]; {
corak = [
0,
1,
2,
]; {
corak =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
]; }
lalai:
{
corak =
[
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,
];
pecah; >var pattern_height = [6, 3, 3, 15 ]; 🎜>Salin kod


Kod adalah seperti berikut:


untuk ( var x = 0; x < canvasData.width; x ) {
untuk ( var y = 0; y < canvasData y ) {
// Indeks piksel dalam susunan
var idx = (x y * canvasData.width) * 4; .data[idx 0];
var g = canvasData.data[idx 1]; nTinggi = pattern_height[m_VideoType];
var indeks = nWidth * (y % nTinggi) (x % nWidth); r = fclamp0255(2 * r); 2 * b);
// tetapkan nilai skala kelabu
canvasData.data[idx 0] = r; // saluran merah
canvasData.data[idx 1] = // Saluran hijau
canvasData.data[idx 2] = b ; // Saluran biru
canvasData.data[idx 3] = 255; // Saluran alfa
// Tambahkan sempadan hitam
jika(x < 8 | |. y < 8 ||. x > (canvasData.width - 8) || canvasData.data[idx 1] = 0;
canvasData.data[idx 2] = 0;
}
}
}

4 data yang ditapis

Salin kod

Kod adalah seperti berikut:

konteks .putImageData(canvasData, 0, 0 );