canvas的ImageData怎麼使用-html教學-PHP中文網

在我們之前有很多關於canvas的文章，大家感興趣的可以看一下，其中有一篇是關於canvas繪製video，其實canvas的功能還有許多，今天就來介紹一下camvas的ImageDate物件的應用。

canvas的ImageData 物件

ImageData物件中儲存著canvas物件真實的像素數據，它包含以下幾個唯讀屬性：

width

#圖片寬度，單位是像素

height

圖片高度，單位是像素

data

Uint8ClampedArray類型的一維數組，包含RGBA格式的整數資料，範圍在0至255之間（包括255）。

建立一個ImageData物件

去建立一個新的，空白的ImageData對象，你應該會使用createImageData() 方法。

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

登入後複製

上面程式碼建立了一個新的特定特定尺寸的ImageData物件。所有像素被預設為透明黑。

得到場景像素資料

為了得到一個包含畫布場景像素資料的ImageData物件，你可以用getImageData()方法：

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

登入後複製

這個方法會傳回一個ImageData對象，它代表了畫布區域的對象數據，此畫布的四個角落分別表示為(left, top), (left + width, top), (left, top + height), 以及(left + width, top + height)四個點。這些座標點被設定為畫布座標空間元素。

在場景中寫入像素資料

你可以用putImageData()方法去對場景進行像素資料的寫入。

ctx.putImageData(myImageData, dx, dy);

登入後複製

dx和dy參數表示你希望在場景內左上角繪製的像素資料所得到的裝置座標。

例如，為了在場景內左上角繪製myImageData代表的圖片，你可以寫如下的程式碼：

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

登入後複製

有如下< canvas>元素

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

登入後複製

應用二：視訊純色背景過濾

今天，我們用getImageData過濾掉純色背景。

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

登入後複製

應用三：圖片灰階和反相顏色

在這個例子裡，我們遍歷所有像素以改變他們的數值。然後我們將被修改的像素數組透過putImageData()放回畫布中去。 invert函數只是去減掉顏色的最大色值255.grayscale函數只是用紅綠和藍的平均值。你也可以用加權平均，例如x = 0.299r + 0.587g + 0.114b這個公式。

var img = new Image();
img.src = &#39;rhino.jpg&#39;;
img.onload = function() {
  draw(this);
};
function draw(img) {
  var canvas = document.getElementById(&#39;canvas&#39;);
  var ctx = canvas.getContext(&#39;2d&#39;);
  ctx.drawImage(img, 0, 0);
  img.style.display = &#39;none&#39;;
  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);
}

登入後複製

應用四-縮放和反鋸齒

var img = new Image();
img.src = &#39;haorooms.jpg&#39;;
img.onload = function() {
  draw(this);
};
function draw(img) {
  var canvas = document.getElementById(&#39;canvas&#39;);
  var ctx = canvas.getContext(&#39;2d&#39;);
  ctx.drawImage(img, 0, 0);
  img.style.display = &#39;none&#39;;
  var zoomctx = document.getElementById(&#39;zoom&#39;).getContext(&#39;2d&#39;);
  var smoothbtn = document.getElementById(&#39;smoothbtn&#39;);
  var toggleSmoothing = function(event) {
    zoomctx.imageSmoothingEnabled = this.checked;
    zoomctx.mozImageSmoothingEnabled = this.checked;
    zoomctx.webkitImageSmoothingEnabled = this.checked;
    zoomctx.msImageSmoothingEnabled = this.checked;
  };
  smoothbtn.addEventListener(&#39;change&#39;, toggleSmoothing);
  var zoom = function(event) {
    var x = event.layerX;
    var y = event.layerY;
    zoomctx.drawImage(canvas,
                      Math.abs(x - 5),
                      Math.abs(y - 5),
                      10, 10,
                      0, 0,
                      200, 200);
  };
  canvas.addEventListener(&#39;mousemove&#39;, zoom);
}

登入後複製

應用五-canvas手繪並下載圖片

rrreee

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！