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

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)

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. 필터링된 데이터 가져오기

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. 필터링된 데이터






코드 복사