JS を使用して画像を操作し、白黒だけを残します

今回はJSを使って白黒だけを残す画像を操作する方法を紹介します。JSを使って白黒だけを残す画像を操作する場合の注意点を実際に見てみましょう。

HTML5 では 要素が導入され、js を通じて 領域に画像を動的に描画できるようになりました。今回はjsで要素を操作して画像を白黒にしました。

左側がimgタグ、右側がcanvas要素タグの構造は以下の通りです

<img src="1.jpg" style="width: 200px; height: 199px"/>
<canvas id="drawing" width="200" height="199" ></canvas>

JSコードは20行強しかなく、非常にシンプルです。魚の釣り方を教えるのではなく、魚の釣り方を教えるという姿勢です。ソースコードは一番下に投稿します。最初に理論について話しましょう。

1. 画像について

いわゆる画像はピクセルで構成されている、つまり 300*300 の画像には合計 300*300 のピクセルがあり、各ピクセルのポイントは次のように構成されていることを誰もが知っているはずです。 3 原色 (赤、緑、青) と透明度 (アルファ)。したがって、画像の画像データを変更したい場合は、実際には画像の各ピクセルのデータを変更します。

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

ImageData オブジェクトには、width、height、
data の 3 つの属性があります。データ属性は、画像内の各ピクセルのデータを格納する配列です。そして、赤、緑、青、アルファで表されます。次に、画像の画像データを変更したい場合は、画像データのデータ属性データを変更し、赤、緑、青、アルファの値を変更する必要があります。

ソースコードはこちらです

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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

複数の配列を結合するときに JS の重複を削除する方法

Promise を使用して WeChat アプレット API を操作する方法

以上がJS を使用して画像を操作し、白黒だけを残しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。