댓글 : html5, 너무 마법. 이 프로그램은 Google 브라우저에서 테스트되었습니다. 관심있는 친구는이 기사에서 설명 된 HTML5 구성 요소 캔버스를 사용하여 이미지 그레이 스케일을 구현하기위한 특정 단계를 참조 할 수 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.
새 HTML 페이지를 만들고 바디 태그 사이에 추가하십시오.
<canvas> 회색 필터 </canvas>
가장 간단한 JavaScript 스크립트를 추가하십시오
<fre> window.onload = function () {
var canvas = document.getElementById ( "mycanvas");
<span> </span> // todo : 여기서 뭔가를하십시오
}
캔버스 객체에서 드로잉 객체 컨텍스트 컨텍스트를 얻기위한 코드는 다음과 같습니다.
var context = canvas.getContext ( "2d");
HTML 페이지에 이미지를 추가하는 HTML 코드는 다음과 같습니다.
<img src = "hanjiaren.jpg" />
HTML IMG 객체에서 이미지 객체를 얻기위한 JavaScript 코드는 다음과 같습니다.
var image = document.getElementById ( "ImagesOURCE");
캔버스 개체에서 결과 이미지를 그리는 코드는 다음과 같습니다.
context.DrawImage (image, 0, 0);
캔버스 개체에서 이미지 픽셀 데이터를 얻기위한 코드는 다음과 같습니다.
var canvasdata = context.getImageData (0, 0, canvas.width, canvas.height);
픽셀 값을 읽고 그레이 스케일 계산 구현 코드는 다음과 같습니다.
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 Grey = .299 * r + .587 * g + .114 * b;
// 그레이 스케일 값을 지정합니다
canvasdata.data [idx + 0] = 회색; // 빨간색 채널
canvasdata.data [idx + 1] = 그레이; // 녹색 채널
canvasdata.data [idx + 2] = 회색; // 블루 채널
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;
}
}
}
계산 그레이 스케일 공식이 회색 색상 = 0.299 × 빨간색 + 0.578 × 녹색 + 0.114 * 블루 컬러
읽기 픽셀 값은 RGBA이며, 이는 빨간색, 녹색, 파란색, 알파 채널을 나타냅니다.
처리 된 데이터는 캔버스로 다시로드되어야합니다. 코드는 다음과 같습니다.
context.putImagedata (CanvasData, 0, 0);
프로그램의 최종 효과는 다음과 같습니다.
전체 소스 코드는 다음과 같습니다.
<html>
<헤드>
<cript>
Window.onload = function () {
var canvas = document.getElementById ( "mycanvas");
var image = document.getElementById ( "ImagesOURCE");
// 캔버스 탈퇴의 크기
canvas.width = image.width;
Canvas.height = image.height;
// 2D 렌더링 객체를 가져옵니다
var context = canvas.getContext ( "2d");
context.DrawImage (image, 0, 0);
var canvasdata = context.getImageData (0, 0, canvas.width, canvas.height);
alert (canvasdata.width.toString ());
alert (canvasdata.height.toString ());
// 회색 필터
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 Grey = .299 * r + .587 * g + .114 * b;
// 그레이 스케일 값을 지정합니다
canvasdata.data [idx + 0] = 회색; // 빨간색 채널
canvasdata.data [idx + 1] = 그레이; // 녹색 채널
canvasdata.data [idx + 2] = 회색; // 블루 채널
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;
}
}
}
context.putImagedata (CanvasData, 0, 0); // coords 0,0에서
};
</스크립트>
</head>
<body>
<H2> 안녕하세요 세계! </h2>
<img src = "hanjiaren.jpg" />
<canvas> 회색 필터 </canvas>
</body>
</html>
코드의 파일은보고 싶은 이미지 파일을 대체 할 수 있습니다.
html5, 너무 마법. 이 프로그램은 Google 브라우저에서 테스트되었습니다.
마지막 조언은 위의 코드를 로컬로 실행하려고 시도하지 마십시오. Google의 보안 점검은 브라우저에서 비 도메인 파일을 읽고 쓰고 자동으로 차단합니다.
Tomcat 또는 웹 컨테이너 서버에 게시하고 Google 브라우저에서 효과를 보는 것이 가장 좋습니다.