Comentario: Este es un efecto de simular el efecto de las partículas spot al tomar pantallas de TV por una cámara. Los amigos interesados en la investigación pueden probar más efectos. El código no ha sido optimizado, es solo una demostración aproximada. Amigos a los que les gusta pueden estudiarlo.
Este es un efecto especial muy interesante, que simula el efecto de las partículas similares al punto que aparecen cuando la cámara dispara la pantalla del TV. El tamaño de las partículas se realiza a través de la matriz de transformación y se puede ajustar arbitrariamente. Los amigos interesados en la investigación pueden probar más efectos. El código no ha sido optimizado, es solo una demostración aproximada, que todos pueden mejorar por su cuenta.1. Obtener datos de imagen
img.src = '';
Canvas.width = img.width;
Canvas.Height = img.Height;
VAR context = Canvas.getContext (2d);
context.DrawImage (img, 0, 0);
var canvasdata = context.getImagegedata (0, 0, Canvas.Width, Canvas.Height);
2. Establezca la matriz de filtro
var m_videotype = 0;
patrón var = new Array ();
Switch (m_videoType)
{
case0: //video_type.video_staggered:
{
patrón = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
veintiuno,
];
romper;
}
case1: //video_type.video_triped:
{
patrón = [
0,
1,
2,
];
romper;
}
case2: //video_type.video_3x3:
{
Patrón =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
romper;
}
por defecto:
{
Patrón =
[
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,
];
romper;
}
}
var patrón_width = [2, 1, 3, 5];
var patrón_height = [6, 3, 3, 15];
3. Obtenga datos filtrados
para (var x = 0; x <canvasdata.width; x ++) {
para (var y = 0; y <canvasdata.height; y ++) {
// índice del píxel en la matriz
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 = patrón_width [m_videotype];
var nHeight = Pattern_Height [m_videotype];
Var index = nwidth * (y % nheight) + (x % nwidth);
índice = patrón [índice];
if (index == 0)
var r = fClamp0255 (2 * r);
if (index == 1)
var g = fClamp0255 (2 * g);
if (index == 2)
var b = fClamp0255 (2 * b);
// Asignar valor de escala de grises
canvasdata.data [idx + 0] = r; // canal rojo
canvasdata.data [idx + 1] = g; // canal verde
canvasdata.data [idx + 2] = b; // canal azul
canvasdata.data [IDX + 3] = 255; // canal alfa
// Agregar borde negro
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. Escribe datos filtrados
context.putimagedata (Canvasdata, 0, 0);
5. Materiales de referencia
Proyecto de código abierto Dai Zhenjun ImageFilter