Kommentar: Dies ist ein Effekt der Simulation des Effekts von Spotpartikeln beim Aufnehmen von Fernsehbildschirmen durch eine Kamera. Freunde, die an Forschung interessiert sind, können mehr Effekte ausprobieren. Der Code wurde nicht optimiert, es ist nur eine grobe Demo. Freunde, die es mögen, können es studieren.
Dies ist ein sehr interessanter Spezialeffekt, der den Effekt von dot-ähnlichen Partikeln simuliert, die beim Schießen der Kamera auf den TV-Bildschirm erscheinen. Die Größe der Partikel wird durch die Transformationsmatrix realisiert und kann willkürlich angepasst werden. Freunde, die an Forschung interessiert sind, können mehr Effekte ausprobieren. Der Code wurde nicht optimiert, es ist nur eine grobe Demo, die sich jeder für seine eigenen verbessern kann.1. Bilddaten erhalten
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. Stellen Sie die Filtermatrix ein
var m_videotype = 0;
var muster = new Array ();
Schalter (m_videotype)
{
Case0: //video_type.video_staggered:
{
Muster = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,,
Einundzwanzig,
];
brechen;
}
Case1: //video_type.video_triped:
{
Muster = [
0,,
1,,
2,
];
brechen;
}
Case2: //video_type.video_3x3:
{
Muster =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,,
];
brechen;
}
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, 2, 0,,
];
brechen;
}
}
var muster_width = [2, 1, 3, 5];
var muster_Height = [6, 3, 3, 15];
Filtrierte Daten erhalten
für (var x = 0; x <canvasdata.width; x ++) {
für (var y = 0; y <canvasdata.height; y ++) {
// Index des Pixels im 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 = muster_width [m_videotype];
var nHeight = muster_Height [m_videotype];
var index = nwidth * (y % nHeight) + (x % nwidth);
index = muster [index];
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; // Green Channel
canvasdata.data [idx + 2] = b; // Blauer Kanal
canvasdata.data [idx + 3] = 255; // Alpha -Kanal
// schwarze Grenze hinzufügen
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. Schreiben Sie gefilterte Daten
context.putimagedata (canvasdata, 0, 0);
5. Referenzmaterialien
Dai Zhenjun Imagefilter Open Source -Projekt