의견 : 이것은 카메라로 TV 화면을 촬영할 때 스팟 입자의 효과를 시뮬레이션하는 효과입니다. 연구에 관심이있는 친구는 더 많은 효과를 시도 할 수 있습니다. 코드는 최적화되지 않았으며 거친 데모 일뿐입니다. 그것을 좋아하는 친구들은 그것을 공부할 수 있습니다.
이것은 매우 흥미로운 특수 효과로 카메라가 TV 화면을 촬영할 때 나타나는 점과 같은 입자의 효과를 시뮬레이션합니다. 입자의 크기는 변환 행렬을 통해 실현되며 임의로 조정될 수 있습니다. 연구에 관심이있는 친구는 더 많은 효과를 시도 할 수 있습니다. 코드는 최적화되지 않았으며, 모든 사람이 스스로 개선 할 수있는 거친 데모 일뿐입니다.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, 0, 1, 2, 0,
0, 1, 1, 1, 2,
2, 0, 1, 2, 2,
0, 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, 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. 필터링 된 데이터를 얻습니다
for (var x = 0; x <canvasdata.width; x ++) {
for (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);
색인 = 패턴 [색인];
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 오픈 소스 프로젝트