Komentar: Ini adalah efek mensimulasikan efek partikel spot saat memotret layar TV dengan kamera. Teman yang tertarik dengan penelitian dapat mencoba lebih banyak efek. Kode belum dioptimalkan, itu hanya demo kasar. Teman yang suka bisa mempelajarinya.
Ini adalah efek khusus yang sangat menarik, yang mensimulasikan efek partikel seperti dot yang muncul ketika kamera memotret layar TV. Ukuran partikel direalisasikan melalui matriks transformasi dan dapat disesuaikan secara sewenang -wenang. Teman yang tertarik dengan penelitian dapat mencoba lebih banyak efek. Kode ini belum dioptimalkan, itu hanya demo kasar, yang dapat ditingkatkan oleh semua orang sendiri.1. Dapatkan data gambar
img.src = '';
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext (2D);
context.drawimage (img, 0, 0);
var canvasdata = context.getImagedata (0, 0, canvas.width, canvas.height);
2. Atur matriks filter
var m_videotype = 0;
var pola = array baru ();
sakelar (m_videotype)
{
case0: //video_type.video_staggered:
{
pola = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
Dua puluh satu,
];
merusak;
}
case1: //video_type.video_triped:
{
pola = [
0,
1,
2,
];
merusak;
}
case2: //video_type.video_3x3:
{
pola =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
merusak;
}
bawaan:
{
pola =
[
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,
];
merusak;
}
}
var pola_width = [2, 1, 3, 5];
var pola_height = [6, 3, 3, 15];
3. Dapatkan data yang difilter
untuk (var x = 0; x <canvasdata.width; x ++) {
untuk (var y = 0; y <canvasdata.height; y ++) {
// indeks piksel di array
var idx = (x + y * canvasdata.width) * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var b = canvasdata.data [idx + 2];
var nwidth = pola_width [m_videotype];
var nheight = pola_height [m_videotype];
indeks var = nwidth * (y % nheight) + (x % nwidth);
indeks = pola [indeks];
if (index == 0)
var r = fclamp0255 (2 * r);
if (index == 1)
var g = fclamp0255 (2 * g);
if (index == 2)
var b = fclamp0255 (2 * b);
// Tetapkan nilai skala abu -abu
canvasdata.data [idx + 0] = r; // saluran merah
canvasdata.data [idx + 1] = g; // saluran hijau
canvasdata.data [idx + 2] = b; // Saluran Biru
canvasdata.data [idx + 3] = 255; // Saluran Alpha
// tambahkan perbatasan hitam
if (x <8 || y <8 || x> (canvasdata.width - 8) || y> (canvasdata.height - 8))
{
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
}
}
}
4. Tulis data yang difilter
context.putimageData (canvasdata, 0, 0);
5. Bahan referensi
Dai Zhenjun Imagefilter Proyek Open Source