캔버스 학습 및 필터 구현 코드

디지털 제품이 확산되는 시대에 사진 촬영은 삶의 필수 요소가 되었습니다. 집에 있든, 외출하든, 멀리 여행을 가든, 항상 아름다운 사진을 찍게 됩니다. 하지만 카메라로 직접 촬영한 사진은 우리의 심리적 기대치 사이에 일정한 간격이 있는 경우가 많습니다. 그렇다면 이 간격을 어떻게 줄일 수 있을까요? 정답은 뷰티P사진이다 보니 온갖 뷰티카메라가 쏟아지고 있고, P사진은 휴대가 가능한 기술이 됐다.

실제로 소위 아름다움은 단지 많은 필터를 사용하는 것이며 필터는 특정 알고리즘을 사용하여 이미지의 픽셀을 조작하여 특별한 이미지 효과를 얻습니다. Photoshop을 사용해 본 친구들은 PS에 많은 필터가 있다는 것을 알고 있습니다. 아래에서는 js 캔버스 기술을 사용하여 여러 필터 효과를 얻을 것입니다.

최근 HTML5의 하이라이트인 canvas 배웠습니다. 캔버스를 사용하면 프런트엔드 직원이 쉽게 이미지 처리를 수행할 수 있습니다. API가 많이 있습니다. 이번에는 주로 사용되는 API를 중심으로 다음 두 가지 코드를 완성하겠습니다.

• 탈색 필터 구현
• 네거티브 컬러(역컬러) 필터 구현

이 HTML 요소는 클라이언트 측 벡터 그래픽용으로 설계되었습니다. 자체 동작은 없지만 클라이언트 JavaScript에 그리기 API를 노출하므로 스크립트가 캔버스에 원하는 것은 무엇이든 그릴 수 있습니다.

<canvas> 태그와 SVG 및 VML의 중요한 차이점은 <canvas> 에는 JavaScript 기반 그리기 API가 있는 반면 SVG와 VML은 XML 문서를 사용하여 그리기를 설명한다는 것입니다.

대부분의 캔버스 그리기 API는 <canvas> 요소 자체에 정의되지 않고 캔버스의 getContext() 메서드를 통해 얻은 그리기 환경 개체에 정의됩니다. <canvas> 요소 자체의 기본 너비와 높이는 각각 300px과 150px입니다.

 // 캔버스 요소 처리 var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70; // 지정된 캔버스 태그에서 컨텍스트 개체를 가져옵니다. var ctx = c.getContext(2d ); ctx.fillStyle = #FF0000; // 색상 ctx.fillRect(0, 0, 150, 75);

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //시작 좌표 ctx.lineTo(200, 100) //끝 좌표 ctx .Stroke(); // 즉시 그리기

ctx.arc() 인터페이스의 경우 5개 매개변수는 (x,y,r,start,stop) 입니다. 그 중 x와 y는 원의 중심 좌표이고, r은 반지름이다.

start 및 stop 단위는 라디안 입니다. 길이도 아니고 각도도 아닙니다.

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. 뇌졸중();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Hello World, 10, 50);

이미지 처리 API에는 주로 네 가지가 있습니다.

이미지 그리기: drawImage(img,x,y,width,height) 또는 drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

이미지 데이터 가져오기: getImageData(x,y,width,height)

이미지 데이터 다시 쓰기: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

이미지 내보내기: toDataURL([type, encoderOptions])

더 자세한 API 및 매개변수 설명은 다음을 참조하세요. 캔버스 이미지 처리 API 매개변수 설명

이러한 API를 기반으로 canvas 요소에 그림을 그릴 수 있습니다. 우리 사진이 ./img/photo.jpg 라고 가정해보세요.

 <script> window.onload = function () { var img = new Image() // 새 이미지 객체 선언 img.src = ./img/photo.jpg // 이미지 로드 후 img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); // 이미지 크기에 따라 캔버스 크기를 지정합니다. img.width canvas.height = img.height // 이미지 그리기 ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } }</script>

아래 그림과 같이 그림이 캔버스에 그려집니다.

여기서는 주로 각 픽셀의 RGBA 값을 반환하는 getImageData 함수를 차용합니다. 이미지 처리 공식을 사용하면 픽셀을 조작하여 해당 수학 연산을 수행할 수 있습니다.

색상 제거 효과는 오래된 카메라로 찍은 흑백 사진과 동일합니다. 인간 눈의 민감도를 바탕으로 사람들은 다음과 같은 공식을 제시했습니다.

gray = red * 0.3 + green * 0.59 + blue * 0.11

코드는 다음과 같습니다:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 필터 처리 시작 var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height) for (var i = 0; i < imgData.data . 길이 / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; var grey = 0.3 * red + 0.59 * green + 0.11 * blue; // 회색 계산 // RGB 새로 고침, 참고: // imgData.data[i * 4 + 3] 저장된 값은 알파이므로 변경할 필요가 없습니다. imgData.data[i * 4] = imgData.data[i * 4 + 1] = imgData.data[i * 4 + 2] = grey; } ctx.putImageData(imgData, 0, 0) // 이미지 데이터 다시 쓰기} }</script>

효과는 아래와 같습니다.

4.2 네거티브 컬러 효과

네거티브 컬러 효과는 최대값에서 현재 값을 빼는 것입니다. getImageData로 얻은 RGB의 이론적 최대 숫자 값은 255입니다. 따라서 공식은 다음과 같습니다.

new_val = 255 - val

코드는 다음과 같습니다:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 필터 처리 시작 var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height) for (var i = 0; i < imgData.data . 길이 / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; // RGB 새로 고침, 참고: // imgData.data[i * 4 + 3]는 알파를 저장하므로 imgData.data[i * 4] = 255 - imgData를 변경할 필요가 없습니다. 데이터[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; * 4 + 2] = 255 - imgData.data[i * 4 + 2] } ctx.putImageData(imgData, 0, 0); // 이미지 데이터 다시 쓰기} }</script>

렌더링은 다음과 같습니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.