canvas学習とフィルタ実装

最近、HTML 5のメインイベントであるcanvasを学びました.canvasを利用すると、フロントエンドのスタッフが簡単に画像処理を行うことができます.そのAPIは多く、今回は主によく使われるAPIを学び、以下の2つのコードを完成しました.

カラーフィルタ

を実現する.

負色(反転)フィルタ

を実現する.
ようこそいらっしゃいました:857989948.IT技術の深い交流と共有は、ウェブサイトの制作、運営、UI設計、アルゴリズム分析、ビッグデータ、人工知能などを含むが、これらに限定されない.このグループの主なテーマは深さがあり、態度のある技術交流で、知識の記録に熱中しているあなたの参加を歓迎します.
1 canvasを知っていますか?
1.1 canvasとは?
このHTML要素はクライアントベクトルパターンのために設計されています.それ自体は動作しませんが、クライアントJavaScriptに図面APIを表示して、スクリプトが描きたいものをキャンバスに描くことができます.
1.2 canvasとsvg、vmlの違いは?タグとSVGおよびVMLとの間の重要な違いは、にJavaScriptベースの描画APIがあり、SVGおよびVMLはXMLドキュメントを使用して描画を記述することである.
2 canvas図面学習
多くのCanvasプロットAPIは、要素自体に定義されず、キャンバスのgetContext()メソッドによって得られる「プロット環境」オブジェクトに定義されています.要素自体のデフォルトの幅は、それぞれ300 px、150 pxです.
2.1 canvas長方形の描画

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

2.2 canvas描画パス

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0); //     
ctx.lineTo(200, 100); //     
ctx.stroke(); //     

2.3 canvas円を描く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 canvas描画テキスト

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

3 canvas画像処理学習
3.1共通APIインタフェース
画像処理のAPIについては、主に4つあります.

描画画像: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とパラメータの説明は、canvas画像処理APIパラメータの説明を参照してください.
3.2画像の描画
これらのAPIに基づいて、canvas要素に私たちの画像を描くことができます.私たちの画像は./img/photo.jpgだと仮定します.

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

下の図に示すように、画像はcanvasに描かれています.
4実現フィルター
ここでは主にgetImageData関数を借りて、各画素のRGBA値を返します.画像処理式を用いて,画素を操作して対応する数学的演算を行えばよい.
RGBAとは?
より多くのフィルタ実装
4.1脱色効果
色消し効果は、古いカメラで撮った白黒写真に相当します.人々は人の目の敏感さに基づいて、以下の公式を与えた.gray = red * 0.3 + green * 0.59 + blue * 0.11
コードは次のとおりです.

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

効果は次の図のようになります.
4.2負の効果
負の色の効果は、現在の値を最大値から減算します.一方getImageDataで得られたRGBにおける数値理論の最大値は255である.したがって、式は次のようになります.new_val = 255 - val
コードは次のとおりです.

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

効果図は以下の通りです.
この文章は董沅鑫の個人サイトから来て、引用して、転載して出典を明らかにしてください.
詳細、またはテクニカルコミュニケーションを参照:godbmw.comを参照してください