CanvasのImageDataの使い方

以前にもcanvasに関する記事がたくさんありますので、興味のある方はご覧ください。実際、canvasには多くの機能があります。物体。 。

キャンバスの ImageData オブジェクト

ImageData オブジェクトには、次の読み取り専用属性が含まれます:

幅

画像幅、単位はピクセル

高さ

画像の高さ、単位はピクセル

データ

Uint8ClampedArray 型一次元配列で、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() を通じてキャンバスに戻します。 invert 関数は、色の最大値を 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);

アプリケーション 4 - ズームとアンチエイリアス

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

アプリケーション 5 - キャンバスの手描きと画像のダウンロード

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 中国語 Web サイトの他の関連記事へ!

関連書籍:

CSS3のローディングエフェクトを作成する方法

CSS3を使用してアイコンエフェクトを作成する方法

CSSエンコーディングを変換する方法

以上がCanvasのImageDataの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。