ホームページ > 記事 > ウェブフロントエンド > キャンバスの学習とフィルターの実装コード

キャンバスの学習とフィルターの実装コード

青灯夜游転載: 2018-10-09 16:02:092052ブラウズ

この記事では、Canvas を使って簡単に画像処理を行うためのコードを紹介します。お困りの方は参考にしていただければ幸いです。ヘルプ。

デジタル製品が普及したこの時代、自宅でも外出先でも長距離旅行でも、写真を撮ることは欠かせないものになっています。しかし、カメラで直接撮影した写真には、私たちの心理的期待との間に一定のギャップがあることがよくあります。では、このギャップを減らすにはどうすればよいでしょうか?答えはビューティー P ピクチャです。さまざまな種類のビューティーカメラが登場し、P ピクチャは持ち運び可能なスキルになりました。

実際、いわゆる美しさは多くのフィルターを使用するだけであり、フィルターは特定のアルゴリズムを使用して画像のピクセルを操作し、特別な画像効果を取得します。 Photoshop を使用したことのある友人は、PS に多数のフィルターがあることを知っています。以下では、js Canvas テクノロジーを使用していくつかのフィルター効果を実現します。

私は最近、HTML5 のハイライトである canvas について学びました。キャンバスを使用することで、フロントエンド担当者が簡単に画像処理を行うことができます。 API はたくさんありますが、今回は主によく使われる API を学習し、次の 2 つのコードを完成させます。ネガカラー（反転カラー）フィルター

1.1 キャンバスとは何ですか?

この HTML 要素は、クライアント側のベクターグラフィックス用に設計されています。独自の動作はありませんが、描画 API をクライアント JavaScript に公開して、スクリプトがキャンバスに必要なものを描画できるようにします。

1.2 Canvas、svg、vml の違いは何ですか?

5ba626b379994d53f7acf72a64f9b697

マークアップと SVG および VML の重要な違いは、

5ba626b379994d53f7acf72a64f9b697

には JavaScript ベースの描画 API があるのに対し、SVG には JavaScript ベースの描画 API があることです。 VML では、XML ドキュメントを使用して図面を記述します。

2 キャンバス描画の学習ほとんどの Canvas 描画 API は、

5ba626b379994d53f7acf72a64f9b697

要素自体では定義されていません。ただし、キャンバスの getContext() メソッドを通じて取得された「描画環境」オブジェクトで定義されています。 5ba626b379994d53f7acf72a64f9b697 要素自体のデフォルトの幅と高さは、それぞれ 300 ピクセルと 150 ピクセルです。

2.1 キャンバスは長方形を描画します<pre class="brush:js;">// 处理canvas元素 var c = document.querySelector("#my-canvas"); c.width = 150; c.height = 70; // 获取指定canvas标签上的context对象 var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; // 颜色 ctx.fillRect(0, 0, 150, 75); // 形状</pre>2.2 キャンバスはパスを描画します

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0); // 开始坐标
ctx.lineTo(200, 100); // 结束坐标
ctx.stroke(); // 立即绘制

2.3 キャンバスは円を描画します

ctx.arc() インターフェイスの場合、5 つのパラメーターは

(x,y,r,start,stop)

です。このうち、x、yは円の中心の座標、rは半径です。

start

と stop の単位は ラジアンです。長さではなく、°ではありません。

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

2.4 キャンバス描画テキスト<pre class="brush:js;">var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50);</pre>3 キャンバス画像処理の学習

3.1 一般的に使用される API インターフェイス

画像処理には 4 つの主要な API があります:画像の描画:

drawImage(img,x,y,width,height)

または drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

画像データを取得します:

getImageData(x,y,width,height )

画像データの書き換え: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

画像のエクスポート: toDataURL ([type, encoderOptions])

#API とパラメーターの詳細については、次を参照してください: キャンバス画像処理 API パラメーターの説明

#3.2 画像の描画

これらの API に基づいて、canvas

要素に画像を描画できます。写真が

./img/photo.jpg

であるとします。

<script>
  window.onload = function () {
    var img = new Image() // 声明新的Image对象
    img.src = "./img/photo.jpg"
    // 图片加载后
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");

      // 根据image大小，指定canvas大小
      canvas.width = img.width
      canvas.height = img.height

      // 绘制图像
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    }
  }
</script>

以下に示すように、画像がキャンバスに描画されます。

4 フィルターを実装します

ここでは主に、各ピクセルの RGBA 値を返す getImageData

関数を借用します。画像処理式を利用すると、ピクセルを操作して対応する数学的演算を実行できます。

4.1 色除去効果

色除去効果は、古いカメラで撮影された白黒写真と同等です。人間の目の感度に基づいて、人々は次の式を与えました:

グレー = 赤 * 0.3 緑 * 0.59 青 * 0.11

コードは次のとおりです。 :

<script>
  window.onload = function () {
    var img = new Image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 开始滤镜处理
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgData.data.length / 4; ++i) {
        var red = imgData.data[i * 4],
          green = imgData.data[i * 4 + 1],
          blue = imgData.data[i * 4 + 2];
        var gray = 0.3 * red + 0.59 * green + 0.11 * blue; // 计算gray
        // 刷新RGB，注意：
        // imgData.data[i * 4 + 3]存放的是alpha，不需要改动
        imgData.data[i * 4] = gray;
        imgData.data[i * 4 + 1] = gray;
        imgData.data[i * 4 + 2] = gray;
      }
      ctx.putImageData(imgData, 0, 0); // 重写图像数据
    }
  }
</script>

効果は次のとおりです:

4.2 ネガティブカラーエフェクト

ネガティブカラーエフェクト最大値の値から現在の値を減算することです。 getImageData で取得される RGB の理論上の最大数値は 255 です。したがって、式は次のとおりです。

new_val = 255 - val

コードは次のとおりです。

<script>
  window.onload = function () {
    var img = new Image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 开始滤镜处理
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgData.data.length / 4; ++i) {
        var red = imgData.data[i * 4],
          green = imgData.data[i * 4 + 1],
          blue = imgData.data[i * 4 + 2];
        // 刷新RGB，注意：
        // imgData.data[i * 4 + 3]存放的是alpha，不需要改动
        imgData.data[i * 4] = 255 - imgData.data[i * 4];
        imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1];
        imgData.data[i * 4 + 2] = 255 - imgData.data[i * 4 + 2];
      }
      ctx.putImageData(imgData, 0, 0); // 重写图像数据
    }
  }
</script>

レンダリングは次のとおりです。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、Html5 ビデオチュートリアルをご覧ください。

キャンバスの学習とフィルターの実装コード

関連記事