캔버스의 ImageData를 사용하는 방법

캔버스에 관한 기사가 많이 있었는데, 그 중 하나가 캔버스 그리기 영상입니다. 사실 오늘은 Camvas의 ImageDate 애플리케이션을 소개하겠습니다. 물체. .

캔버스의 ImageData 개체

ImageData 개체는 다음과 같은 읽기 전용 속성을 저장합니다.

width

이미지 너비, 단위는 픽셀

height

이미지 높이, 단위는 픽셀

data

Uint8ClampedArray 유형 1차원 배열이며, 여기에는 0에서 255(255 포함) 범위의 RGBA 형식의 정수 데이터가 포함됩니다.

ImageData 개체 만들기

새 빈 ImageData 개체를 만들려면 createImageData() 메서드를 사용해야 합니다.

var myImageData = ctx.createImageData(width, height);

위 코드는 특정 크기의 새 ImageData 객체를 생성합니다. 모든 픽셀은 투명한 검정색으로 사전 설정되어 있습니다.

장면 픽셀 데이터 가져오기

캔버스 장면 픽셀 데이터가 포함된 ImageData 개체를 얻으려면 getImageData() 메서드를 사용할 수 있습니다.

var myImageData = ctx.getImageData(left, top, width, height);

이 메서드는 캔버스 영역의 개체 데이터를 나타내는 ImageData 개체를 반환합니다. 이 방법은 캔버스의 네 모서리를 (왼쪽, 위쪽), (왼쪽 + 너비, 위쪽), (왼쪽, 위쪽 + 높이), (왼쪽 + 너비, 위쪽 + 높이) 4개 지점으로 표현합니다. 이러한 좌표점은 캔버스 좌표 공간 요소로 설정됩니다.

장면에 픽셀 데이터 쓰기

putImageData() 메서드를 사용하여 픽셀 데이터를 장면에 쓸 수 있습니다.

ctx.putImageData(myImageData, dx, dy);

dx 및 dy 매개변수는 장면의 왼쪽 상단에 있는 픽셀 데이터를 그려 얻은 장치 좌표를 나타냅니다.

예를 들어 장면의 왼쪽 상단에 myImageData로 표시되는 이미지를 그리려면 다음 코드를 작성하면 됩니다. 동영상 단색 배경 필터링

오늘은 getImageData를 사용하여 단색 배경을 필터링합니다.

ctx.putImageData(myImageData, 0, 0);
toDataURL 将canvas转为 data URI格式

응용 프로그램 3: 이미지 회색조 및 반전 색상

이 예에서는 모든 픽셀을 반복하여 값을 변경합니다. 그런 다음 수정된 픽셀 배열을 putImageData()를 통해 캔버스에 다시 넣습니다. 반전 기능은 색상의 최대 색상 값에서 255를 뺍니다. 회색조 기능은 빨간색, 녹색 및 파란색의 평균을 사용합니다. 공식 x = 0.299r + 0.587g + 0.114b와 같은 가중 평균을 사용할 수도 있습니다.

<canvas id="canvas" width="5" height="5"></canvas>
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
应用一：颜色选择器
var img = new Image();
img.src = &#39;haorooms.jpg&#39;;
var canvas = document.getElementById(&#39;canvas&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = &#39;none&#39;;
};
var color = document.getElementById(&#39;color&#39;);
function pick(event) {
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;
  console.log(data);
  var rgba = &#39;rgba(&#39; + data[0] + &#39;,&#39; + data[1] +
             &#39;,&#39; + data[2] + &#39;,&#39; + (data[3] / 255) + &#39;)&#39;;
  color.style.background =  rgba;
  color.textContent = rgba;
}
canvas.addEventListener(&#39;mousemove&#39;, pick);

Application 4-zooming and anti-aliasing

let processor = {
  timerCallback: function() {
    if (this.video.paused || this.video.ended) {
      return;
    }
    this.computeFrame();
    let self = this;
    setTimeout(function () {
        self.timerCallback();
      }, 0);
  },
  doLoad: function() {
    this.video = document.getElementById("video");
    this.c1 = document.getElementById("c1");
    this.ctx1 = this.c1.getContext("2d");
    this.c2 = document.getElementById("c2");
    this.ctx2 = this.c2.getContext("2d");
    let self = this;
    this.video.addEventListener("play", function() {
        self.width = self.video.videoWidth / 2;
        self.height = self.video.videoHeight / 2;
        self.timerCallback();
      }, false);
  },
  computeFrame: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
        let l = frame.data.length / 4;
    for (let i = 0; i < l; i++) {
      let r = frame.data[i * 4 + 0];
      let g = frame.data[i * 4 + 1];
      let b = frame.data[i * 4 + 2];
      if (g > 100 && r > 100 && b < 43)
        frame.data[i * 4 + 3] = 0;
    }
    this.ctx2.putImageData(frame, 0, 0);
    return;
  }
};

Application 5-canvas 손으로 그림 그리기 및 그림 다운로드

var img = new Image();
img.src = 'rhino.jpg';
img.onload = function() {
  draw(this);
};
function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
  var data = imageData.data;
  var invert = function() {
    for (var i = 0; i < data.length; i += 4) {
      data[i]     = 225 - data[i];     // red
      data[i + 1] = 225 - data[i + 1]; // green
      data[i + 2] = 225 - data[i + 2]; // blue
    }
    ctx.putImageData(imageData, 0, 0);
  };
  var grayscale = function() {
    for (var i = 0; i < data.length; i += 4) {
      var avg = (data[i] + data[i +1] + data[i +2]) / 3;
      data[i]     = avg; // red
      data[i + 1] = avg; // green
      data[i + 2] = avg; // blue
    }
    ctx.putImageData(imageData, 0, 0);
  };
  var invertbtn = document.getElementById(&#39;invertbtn&#39;);
  invertbtn.addEventListener(&#39;click&#39;, invert);
  var grayscalebtn = document.getElementById(&#39;grayscalebtn&#39;);
  grayscalebtn.addEventListener(&#39;click&#39;, grayscale);
}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 콘텐츠를 보려면 주목해 주세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!

관련 읽기:

CSS3의 로딩 효과를 만드는 방법

css3을 사용하여 아이콘 효과를 만드는 방법

CSS 인코딩을 변환하는 방법

위 내용은 캔버스의 ImageData를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!