Gunakan kanvas untuk mencapai kesan penapis imej dengan kemahiran tutorial demonstration_html5

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

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;
}
}
}

konteks .putImageData(canvasData, 0, 0 );