JavaScript_javascript 기술을 사용하여 이미지를 흑백으로 만드는 방법

이 글에서는 JS로 흑백 이미지를 구현하는 코드를 주로 소개하겠습니다. 필요하신 분들은 참고하시면 됩니다. JS를 통한 요소를 조작하여 이미지를 흑백으로 만들었습니다.

먼저 렌더링을 살펴보겠습니다

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

<img  src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy"     style="max-width:90%"/ alt="JavaScript_javascript 기술을 사용하여 이미지를 흑백으로 만드는 방법" >
<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); <br>를 전달합니다. ImageData 객체에는 너비, 높이,

data라는 세 가지 속성이 있습니다. data 속성은 이미지의 각 픽셀의 데이터를 저장하는 배열입니다. 그리고 빨간색, 녹색, 파란색, 알파로 표시됩니다. 그런 다음 이미지의 이미지 데이터를 변경하려면 이미지 데이터의 데이터 속성 데이터를 변경하고 빨간색, 녹색, 파란색, 알파 값을 변경해야 합니다. here는 소스 코드

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);
    }

related 권장 사항이 있습니다. JavaScript 작동 메커니즘 및 개념 분석

위 내용은 JavaScript_javascript 기술을 사용하여 이미지를 흑백으로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!