HTML5는 정말 마술적입니다. 프로그램은 Google 브라우저에서 테스트를 통과했습니다. 관심 있는 친구는 이 기사에 설명된 HTML5 구성 요소 Canvas를 사용하여 이미지의 회색조를 구현하는 구체적인 단계를 참조할 수 있습니다.
새 HTML 페이지 만들기
:
<canvas id="myCanvas" >Gray Filter</canvas>
가장 간단한 JavaScript 스크립트
와
<pre name="code" class="javascript">window.onload = function() { var canvas = document.getElementById("myCanvas"); <span style="white-space:pre"> </span>// TODO: do something here }
사이에 다음 코드를 추가합니다. 코드는 다음과 같습니다.
Canvas 객체에서 그리기 객체의 컨텍스트를 가져오는 코드는 다음과 같습니다.
var context = canvas.getContext("2d");
<img id="imageSource" src="hanjiaren.jpg" alt="Canvas Source" />
코드는 다음과 같습니다.
자바스크립트 코드는 다음과 같습니다. html img 객체에서 이미지 객체를 얻는 방법은 다음과 같습니다.
var image = document.getElementById("imageSource");
획득한 이미지를 Canvas 객체에 그리는 코드는 다음과 같습니다.
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++) { // Index of the pixel in the array 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]; // calculate gray scale value var gray = .299 * r + .587 * g + .114 * b; // assign gray scale value canvasData.data[idx + 0] = gray; // Red channel canvasData.data[idx + 1] = gray; // Green channel canvasData.data[idx + 2] = gray; // Blue channel canvasData.data[idx + 3] = 255; // Alpha channel // add black border 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);
프로그램의 최종 효과는 다음과 같습니다
:
전체 소스 코드는 다음과 같습니다
:
<script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var image = document.getElementById("imageSource"); // re-size the canvas deminsion canvas.width = image.width; canvas.height = image.height; // get 2D render object 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()); // gray filter for ( var x = 0; x < canvasData.width; x++) { for ( var y = 0; y < canvasData.height; y++) { // Index of the pixel in the array 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]; // calculate gray scale value var gray = .299 * r + .587 * g + .114 * b; // assign gray scale value canvasData.data[idx + 0] = gray; // Red channel canvasData.data[idx + 1] = gray; // Green channel canvasData.data[idx + 2] = gray; // Blue channel canvasData.data[idx + 3] = 255; // Alpha channel // add black border 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); // at coords 0,0 }; </script>Hello World!
<img id="imageSource" src="hanjiaren.jpg" alt="Canvas Source" /> <canvas id="myCanvas" >Gray Filter</canvas>
코드에 있는 파일은 원하는 대로 바꿀 수 있습니다. 보고 싶은 이미지 파일