Canvas를 사용하여 사진을 처리하는 방법을 가르쳐주세요.

중국어로 캔버스로 번역되는 캔버스에는 HTML5에 새로운 <canvas> 요소가 있습니다. 이 요소는 JavaScript와 결합하여 캔버스에 동적으로 그래픽을 그릴 수 있습니다.

오늘은 Canvas에서 그래픽을 그리는 방법에 대해 이야기하지 않고 그림을 처리하는 방법에 대해 이야기하겠습니다.

프로세스는 아마도 매우 간단하며 주로 다음 세 단계로 나뉩니다.

네, 코끼리를 냉장고에 넣듯이 쉽죠, 하하.

전체 프로세스에 사용되는 주요 Canvas API는 다음과 같습니다.

1. 이미지 그리기: drawImage()
2. 이미지 데이터 가져오기: getImageData()
3. 이미지 데이터 다시 쓰기: putImageData()
4. 이미지 내보내기: toDataURL()

이름에서 알 수 있듯이 이 방법은 캔버스 캔버스에 이미지를 그리는 데 사용됩니다. 세 가지 구체적인 용도가 있습니다.

① 캔버스에 이미지 위치 지정: context.drawImage(img,x,y)

② 캔버스에 이미지를 배치하고 이미지의 너비와 높이를 지정합니다. context.drawImage(img,x,y,width,height)

③ 이미지를 자르고 잘라낸 부분을 캔버스에 위치시킵니다: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

위의 매개변수 값은 다음 표에 설명되어 있습니다.

이 방법은 캔버스 캔버스에서 이미지 데이터를 얻는 데 사용됩니다. 구체적인 사용법은 다음과 같습니다.

캔버스의 지정된 직사각형 범위 내에서 픽셀 데이터를 가져옵니다. var ImageData = context.getImageData(x,y,width,height)

위의 매개변수 값은 다음 표에 설명되어 있습니다.

이 메소드는 너비, 높이, 데이터의 세 가지 속성을 갖는 ImageData 객체를 반환합니다. 이미지의 각 픽셀의 데이터를 저장하기 때문에 우리가 주로 사용하는 데이터 배열은 다음과 같습니다. 이러한 데이터를 얻은 후에는 이를 처리하고 최종적으로 캔버스 캔버스에 다시 작성하여 그림 처리 및 변환을 실현할 수 있습니다. 데이터 배열의 구체적인 사용법은 다음 예에서 확인할 수 있습니다.

이 방법은 매우 간단하며 이미지 데이터를 캔버스 캔버스에 다시 쓰는 데 사용됩니다. 구체적인 사용법은 다음과 같습니다.

 context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

위의 매개변수 값은 다음 표에 설명되어 있습니다.

이 메소드는 위의 세 가지 메소드와 다릅니다. Canvas 객체의 메소드입니다. 이 메소드는 <img의 src 속성을 채우는 이미지 경로 주소로 직접 사용할 수 있습니다. > 태그의 구체적인 사용법은 다음과 같습니다.

 var dataURL = canvas.toDataURL(유형, 인코더옵션);

위의 매개변수 값은 다음 표에 설명되어 있습니다.

이번 예제에서는 코드를 통해 컬러 사진을 흑백 사진으로 처리하는 방법을 간략하게 소개합니다.

 <!--HTML--><canvas id=canvas width=600 height=600></canvas><input id=handle type=button value=그림 처리/><input id=create type=button value=그림 생성 /><div id=결과></div>

 //JavaScriptwindow.onload = function(){ var canvas = document.getElementById(canvas), //캔버스 캔버스 개체 가져오기 context = canvas.getContext('2d'); //2D 컨텍스트 개체 가져오기, 대부분의 Canvas API는 이 객체 메소드 var image = new Image(); //이미지 객체 정의 image.src = 'imgs/img.jpg' image.onload = function(){ //여기에 주목해야 합니다! 모든 후속 작업은 이미지가 성공적으로 로드된 후에 수행되어야 합니다. 그렇지 않으면 이미지가 처리됩니다. valid context.drawImage(image,0,0) //캔버스의 왼쪽 상단(0,0)에서 이미지 그리기를 시작합니다. canvas.기본 크기는 이미지의 실제 크기입니다. var handler = document.getElementById(handle); var create = document.getElementById(create); handler.onclick = function(){ // 이미지를 처리하려면 이미지 처리 버튼을 클릭하세요. var imgData = context.getImageData(0,0,canvas.width,canvas.height); //이미지 데이터 객체를 가져옵니다. var data = imgData.data; //이미지 데이터 배열을 가져옵니다. 배열의 각 픽셀은 4개의 요소로 저장됩니다. 빨간색, 녹색, 파란색 및 투명도 값을 각각 나타냅니다. varaverage = 0 for (var i = 0; i < data.length; i+=4) {average = Math.floor((data[i]+data[i+1]+data[i+2])/3); //빨간색, 녹색, 파란색 값을 평균하여 회색조 값을 얻습니다. data[i] = data[i+1] = data[i+2] = 평균; 각 픽셀의 색상 값을 다시 작성합니다.} imgData.data = data.putImageData(imgData,0,0); //처리된 이미지 데이터를 캔버스 캔버스에 다시 작성하면 캔버스의 이미지가 흑백이 됩니다.}; create.onclick = function(){ // 이미지를 내보내려면 이미지 생성 버튼을 클릭하세요. var imgSrc = canvas.toDataURL( ); //이미지의 DataURL 가져오기 var newImg = new Image(); var result = document.getElementById(result); newImg.src = imgSrc; result.innerHTML = ''; result.appendChild(newImg) };};

아마도 위의 코드는 잘 작성되지 않았고 이해하기 쉽지 않을 것 같습니다. 더 깊이 이해할 수 있도록 직접 작성하는 것이 가장 좋습니다.

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