Canvas를 사용하여 이미지를 처리하는 방법

중국어로 "캔버스"로 번역되는 캔버스에는 HTML5에 새로운 <캔버스> 요소가 있습니다. 이 요소는 JavaScript와 결합하여 캔버스에 그래픽을 동적으로 그릴 수 있습니다. 이 글은 주로 Canvas를 사용하여 이미지를 처리하는 방법에 대한 관련 정보를 소개합니다. 이 글은 모든 사람의 학습이나 작업에 대한 특정 참고 학습 가치를 가지고 있기를 바랍니다.

이 과정은 아마도 매우 간단할 것입니다. 주로 다음 세 단계로 나뉩니다.

캔버스 이미지 처리

네, 코끼리를 냉장고에 넣는 것만큼이나 간단합니다. 하하.

1. 주요 API

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

• 이미지 그리기: drawImage()

• 이미지 데이터 가져오기: getImageData()

• 이미지 데이터 다시 쓰기: putImageData( )

• 이미지 내보내기: toDataURL()

1.drawImage()

이름에서 알 수 있듯이 이 메서드는 캔버스 캔버스에 이미지를 그리는 데 사용됩니다.

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

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

③ 이미지 잘라내기, 잘라낸 부분을 캔버스에 위치 지정: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

위 매개변수 값은 다음 표:

매개변수	설명
img	은 사용할 이미지, 캔버스 또는 비디오를 지정합니다.
sx	선택 사항입니다. 자르기를 시작할 X 좌표 위치입니다.
sy	선택사항. 절단을 시작할 Y좌표 위치입니다.
swidth	선택사항. 자른 이미지의 너비입니다.
키	선택 사항입니다. 잘린 이미지의 높이입니다.
x	캔버스에 이미지의 x 좌표 위치를 배치합니다.
y	이미지의 y좌표 위치를 캔버스에 놓습니다.
너비	선택사항. 사용할 이미지의 너비입니다. (이미지 늘리기 또는 줄이기)
height	선택사항. 사용할 이미지의 높이입니다. (이미지를 늘이거나 축소)

2.getImageData()

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

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

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

Parameter	Description
x	복사를 시작할 왼쪽 상단 위치의 x 좌표입니다.
y	복사를 시작하려면 왼쪽 상단의 y좌표를 선택하세요.
width	복사할 직사각형 영역의 너비입니다.
height	복사할 직사각형 영역의 높이입니다.

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

3.putImageData()

이 방법은 매우 간단하며, 구체적인 사용법은 다음과 같습니다:

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

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

Parameter	Description
imgData	ImageData 개체를 지정하여 캔버스에 다시 넣습니다.
x	ImageData 개체 왼쪽 위 모서리의 x 좌표(픽셀)입니다.
y	ImageData 개체 왼쪽 위 모서리의 y 좌표(픽셀 단위)입니다.
dirtyX	선택사항. 캔버스에 이미지를 배치할 가로 값(x)(픽셀 단위)입니다.
dirtyY	선택 사항입니다. 캔버스에 이미지를 배치할 가로 값(y)(픽셀 단위)입니다.
dirtyWidth	선택사항. 캔버스에 이미지를 그리는 데 사용되는 너비입니다.
dirtyHeight	선택사항. 캔버스에 이미지가 그려지는 높이입니다.

4.toDataURL()

이 메서드는 위의 세 가지 메서드와 다릅니다. 이 메서드는 이미지 경로 주소< img> 태그의 src 속성에서 구체적인 사용법은 다음과 같습니다:

var dataURL = canvas.toDataURL(type, EncoderOptions); 이미지 형식, 기본값은 image/png입니다.

encoderOptions선택 사항. 지정된 이미지 형식이 image/jpeg 또는 image/webp인 경우 이미지 품질을 0에서 1까지 선택할 수 있습니다. 값이 범위를 벗어나면 기본값인 0.92가 사용됩니다. 다른 매개변수는 무시됩니다. 2. 이미지 처리 예제 이 예제에서는 코드를 통해 컬러 사진을 흑백 사진으로 처리하는 방법을 간략하게 소개합니다.

<!--HTML-->
<canvas id="canvas" width="600" height="600"></canvas>
<input id="handle" type="button" value="处理图片" />
<input id="create" type="button" value="生成图片" />
<p id="result"></p>

//JavaScript
window.onload = function(){
  var canvas = document.getElementById("canvas"),  //获取Canvas画布对象
    context = canvas.getContext('2d'); //获取2D上下文对象，大多数Canvas API均为此对象方法
  var image = new Image(); //定义一个图片对象
  image.src = 'imgs/img.jpg'; 
  image.onload = function(){ //此处必须注意！后面所有操作均需在图片加载成功后执行，否则图片将处理无效
    context.drawImage(image,0,0); //将图片从Canvas画布的左上角(0,0)位置开始绘制，大小默认为图片实际大小
    var handle = document.getElementById("handle");
    var create = document.getElementById("create");
    handle.onclick = function(){ // 单击“处理图片”按钮，处理图片
      var imgData = context.getImageData(0,0,canvas.width,canvas.height);  //获取图片数据对象
      var data = imgData.data; //获取图片数据数组，该数组中每个像素用4个元素来保存，分别表示红、绿、蓝和透明度值
      var average = 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] = average; 将每个像素点的色值重写
      }
      imgData.data = data;
      context.putImageData(imgData,0,0); //将处理后的图像数据重写至Canvas画布，此时画布中图像变为黑白色
    };
    create.onclick = function(){ // 单击“生成图片”按钮，导出图片
      var imgSrc = canvas.toDataURL(); //获取图片的DataURL
      var newImg = new Image();
      var result = document.getElementById("result");
      newImg.src = imgSrc; //将图片路径赋值给src
      result.innerHTML = '';
      result.appendChild(newImg);
    };
  };
};

관련 추천: 이미지의 캔버스 처리

	PHP 이미지 처리를 사용하여 여러 이미지를 하나로 결합하는 예

캔버스 이미지 처리

위 내용은 Canvas를 사용하여 이미지를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!