Comentário: Este é um efeito de simular o efeito das partículas de ponto ao fotografar telas de TV por uma câmera. Amigos interessados em pesquisas podem tentar mais efeitos. O código não foi otimizado, é apenas uma demonstração aproximada. Amigos que gostam pode estudá -lo.
Este é um efeito especial muito interessante, que simula o efeito de partículas semelhantes a pontos que aparecem quando a câmera atira na tela da TV. O tamanho das partículas é realizado através da matriz de transformação e pode ser ajustado arbitrariamente. Amigos interessados em pesquisas podem tentar mais efeitos. O código não foi otimizado, é apenas uma demonstração aproximada, que todos podem melhorar por conta própria.1. Obtenha dados de imagem
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. Defina a matriz do filtro
var m_videotype = 0;
var padrão = new Array ();
Switch (m_videotype)
{
case0: //video_type.video_staggered:
{
padrão = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
vinte e um,
];
quebrar;
}
case1: //video_type.video_triped:
{
padrão = [
0,
1,
2,
];
quebrar;
}
case2: //video_type.video_3x3:
{
padrão =
[[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
quebrar;
}
padrão:
{
padrão =
[[
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,
];
quebrar;
}
}
var Pattern_width = [2, 1, 3, 5];
var Pattern_Height = [6, 3, 3, 15];
3. Obtenha dados filtrados
for (var x = 0; x <canvasdata.width; x ++) {
for (var y = 0; y <canvasdata.Height; y ++) {
// índice do pixel na 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 = Pattern_Width [m_videotype];
var nHeight = Pattern_Height [m_videotype];
var index = nWidth * (y % nheight) + (x % nWidth);
índice = padrão [í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);
// atribui valor à escala de cinza
canvasdata.data [idx + 0] = r; // canal vermelho
canvasdata.data [idx + 1] = g; // canal verde
canvasdata.data [idx + 2] = b; // canal azul
canvasdata.data [idx + 3] = 255; // canal alfa
// Adicionar borda preta
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. Escreva dados filtrados
context.putImagedata (Canvasdata, 0, 0);
5. Materiais de referência
Dai Zhenjun ImageFilter Open Source Project