캔버스를 사용하여 데모와 함께 이미지 필터 효과를 실현하십시오.

의견 : 이것은 카메라로 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 오픈 소스 프로젝트