사진에 대한 JS 흑백 설정

이번에는 JS의 흑백 이미지 설정에 대해 알려드리겠습니다. JS의 흑백 이미지 설정에 대한 주의 사항은 무엇입니까? 아래는 실제 사례입니다.

HTML5에는 js를 통해 영역에 이미지를 동적으로 그릴 수 있는 요소가 도입되었습니다. 이번에는 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 = <a href="http://www.php.cn/code/658.html" target="_blank">document<code>var drawing = <a href="http://www.php.cn/code/658.html" target="_blank">document</a>.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); .getElementById( '드로잉'); 이 메소드는 캔버스 객체를 가져올 수 있습니다. 캔버스 객체는 2D 및 3D의 두 가지 그리기 메소드를 제공합니다. 여기서는 2D 그리기를 사용합니다.

context2d = Drawing.getContext('2d'); context2d 객체를 얻는 방법. context2d 객체를 얻은 후 context2d에서 제공하는 getImageData() 메소드를 통해 이미지 데이터를 얻습니다. getImageData()에는 각각 화면 영역의 x 및 y 좌표와 영역의 픽셀 너비 및 높이를 나타내는 4개의 매개변수가 있습니다. code> var imagedata = context2d.getImageData(0, 0, image.width, image.height)

ImageData 개체에는 너비, 높이 및 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

업로드된 이미지의 유형과 크기를 결정하는 데 필요한 단계

여러 배열을 병합할 때 데이터 중복을 제거하는 방법

React props 및 상태 속성 사용에 대한 자세한 설명

🎜

위 내용은 사진에 대한 JS 흑백 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!