Комментарий: Это эффект моделирования эффекта пяточных частиц при съемке телевизионных экранов с помощью камеры. Друзья, которые заинтересованы в исследованиях, могут попробовать больше эффектов. Код не был оптимизирован, это просто грубая демонстрация. Друзья, которым это нравится, могут изучить это.
Это очень интересный специальный эффект, который имитирует эффект, похожие на точечные частицы, появляющиеся, когда камера снимает экран телевизора. Размер частиц реализуется через матрицу преобразования и может быть отрегулирован произвольно. Друзья, которые заинтересованы в исследованиях, могут попробовать больше эффектов. Код не был оптимизирован, это просто грубая демонстрация, которую каждый может улучшить самостоятельно.1. Получить данные изображения
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. Установите матрицу фильтра
var m_videotype = 0;
var pattern = new Array ();
переключение (m_videotype)
{
case0: //video_type.video_staggered:
{
шаблон = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
двадцать один,
];
перерыв;
}
case1: //video_type.video_triped:
{
шаблон = [
0,
1,
2,
];
перерыв;
}
case2: //video_type.video_3x3:
{
шаблон =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
перерыв;
}
по умолчанию:
{
шаблон =
[
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,
];
перерыв;
}
}
var pattern_width = [2, 1, 3, 5];
var pattern_height = [6, 3, 3, 15];
3. Получить отфильтрованные данные
для (var x = 0; x <canvasdata.width; x ++) {
для (var y = 0; y <canvasdata.height; y ++) {
// Индекс пикселя в массиве
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);
index = pattern [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);
// назначить значение серого шкалы
canvasdata.data [idx + 0] = r; // Красный канал
canvasdata.data [idx + 1] = g; // зеленый канал
canvasdata.data [idx + 2] = b; // Синий канал
canvasdata.data [idx + 3] = 255; // Альфа -канал
// Добавить черную границу
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. Напишите фильтрованные данные
context.putimagedata (canvasdata, 0, 0);
5. Справочные материалы
Dai Zhenjun ImageFilter Project с открытым исходным кодом