Demonstration_html5 튜토리얼 기술로 캔버스를 사용하여 이미지 필터 효과 얻기

이는 카메라가 TV 화면을 캡처할 때 나타나는 점 모양의 거친 효과를 시뮬레이션하는 매우 흥미로운 특수 효과입니다. 입자의 크기는 변환 행렬을 통해 구현되며 임의로 조정할 수 있습니다. 연구에 관심이 있는 친구들은 더 많은 효과를 시도해 볼 수 있습니다. 코드는 최적화되지 않았으며 대략적인 데모일 뿐입니다.

1. 이미지 데이터 가져오기

코드 복사

코드는 다음과 같습니다. 다음:

img.src = 'http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg'
canvas.width = img.width ;
canvas.height = img.height;
var context = canvas.getContext(“2d”)
context.drawImage(img, 0, 0); context.getImageData (0, 0, canvas.width, canvas.height)

2. 필터 매트릭스 설정

코드 복사코드는 다음과 같습니다.

var m_VideoType=0;

var Pattern=new Array(); >스위치(m_VideoType)
{
case0://VIDEO_TYPE.VIDEO_STAGGERED:
{
pattern = [
0, 1,
0, 2,
1, 2 ,
1, 0,
2, 0,
2, 1,
]
break
}
case1://VIDEO_TYPE.VIDEO_TRIPED:
{
패턴 = [
0,
1,
2,
]
break
}
case2://VIDEO_TYPE.VIDEO_3X3:
{
패턴 =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
]
break; }
기본값:
{
패턴 =
[
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, 0,
];
break;
}
}
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; canvasData.height; y ) { // 배열의 픽셀 인덱스

var idx = (x y * canvasData.width) * 4; .data[idx 0];

var g = canvasData.data[idx 1];

var b = canvasData.data[idx 2]
var nWidth = 패턴_폭[m_VideoType]; nHeight = 패턴_높이[m_VideoType];
var index = nWidth * (y % nHeight) (x % nWidth);
index = 패턴[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 (canvasData.height - 8))
{
canvasData.data[idx 1] = 0;
canvasData.data[idx 2] = 0;
}
}
}


4. 필터링된 데이터






코드 복사

코드는 다음과 같습니다.
context .putImageData(canvasData, 0, 0 );

5. 참고 자료 Dai Zhenjun ImageFilter 오픈 소스 프로젝트