집 > 기사 > 웹 프론트엔드 > JS를 사용하여 이미지를 조작하고 흑백만 남깁니다.

JS를 사용하여 이미지를 조작하고 흑백만 남깁니다.

php中世界最好的语言원래의: 2018-06-08 17:29:022071검색

이번에는 JS를 사용하여 흑백만 유지하는 사진 조작 방법을 보여드리겠습니다. JS를 사용하여 흑백만 유지하도록 사진을 조작할 때 주의사항은 무엇인가요?

HTML5에는 js를 통해

왼쪽이 img 태그이고, 오른쪽이 캔버스 요소 태그입니다. 구조는 다음과 같습니다

<img src="1.jpg" style="width: 200px; height: 199px"/>
<canvas id="drawing" width="200" height="199" ></canvas>

JS 코드는 20줄 남짓으로 매우 간단합니다. 사람에게 낚시하는 법을 가르치는 것보다 낚시하는 법을 가르치는 태도, 소스 코드는 맨 아래에 게시할 것입니다. 먼저 이론에 대해 이야기하겠습니다.

1. 사진에 대하여

소위 사진은 픽셀로 구성된다는 사실, 즉 300*300 사진은 총 300*300 픽셀로 이루어져 있으며 각 픽셀은 포인트로 구성되어 있다는 사실은 누구나 알아야 합니다. 세 가지 기본 색상(빨간색, 녹색, 파란색)과 투명도(알파)입니다. 따라서 이미지의 이미지 데이터를 변경하려면 실제로 이미지의 각 픽셀 데이터를 변경해야 합니다.

2. API 정보

var drawing = document.getElementById('drawing'); 这个方法可以拿到 canvas对象，canvas对象提供了 2D、3D两种绘图方式，这里我们使用2D绘图
使用 context2d = drawing.getContext('2d'); 方法获得context2d对象。拿到context2d对象之后，我们通过context2d提供的方法getImageData(),来获取图像数据，getImageData()有4个参数，分别表示画面区域的 x 和 y 坐标以及该区域的像素宽度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height);

를 전달합니다. ImageData 객체에는 너비, 높이,
data라는 세 가지 속성이 있습니다. data 속성은 이미지의 각 픽셀의 데이터를 저장하는 배열입니다. 그리고 빨간색, 녹색, 파란색, 알파로 표시됩니다. 그런 다음 이미지의 이미지 데이터를 변경하려면 이미지 데이터의 데이터 속성 데이터를 변경하고 빨간색, 녹색, 파란색, 알파 값을 변경해야 합니다.

소스 코드는 다음과 같습니다

function drawImageData () {
      var context2d = null;
      if(drawing.getContext) {
        context2d = drawing.getContext('2d');
      }
      if (context2d == null) {
        return;
      }
      var image = document.images[0];
      context2d.drawImage(image, 0 , 0);
      var imagedata = context2d.getImageData(0, 0, image.width, image.height);
      var data = imagedata.data;
      console.log('data: ' + data);
      var i,len,red,green,blue,alpha,average;
      for (i = 0 , len = data.length; i < len; i+=4) {
        red = data[i];
        green = data[i + 1];
        blue = data[i + 2];
        alpha = data[i + 3];
        average = Math.floor((red + green + blue) / 3);
        data[i] = average; 
        data[i+1] = average; 
        data[i+2] = average;
      }
      imagedata.data = data;
      context2d.putImageData(imagedata, 0, 0);
    }

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!