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

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

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

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

• 脱色フィルターの実装
• ネガティブカラー（反転カラー）フィルターの実装

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

<canvas>タグと SVG および VML の重要な違いは、 <canvas>は JavaScript ベースの描画 API があるのに対し、SVG および VML では描画の記述に XML ドキュメントが使用されることです。

Canvas 描画 API のほとんどは、 <canvas>要素自体では定義されませんが、キャンバスのgetContext()メソッドを通じて取得される描画環境オブジェクトで定義されます。 <canvas>要素自体のデフォルトの幅と高さは、それぞれ 300 ピクセルと 150 ピクセルです。

 // キャンバス要素を処理します var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70; // 指定されたキャンバス タグのコンテキスト オブジェクトを取得します var ctx = c.getContext(2d) ); ctx.fillStyle = #FF0000; // カラー ctx.fillRect(0, 0, 150, 75);

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //開始座標 ctx.lineTo(200, 100); //終了座標 ctx .ストローク(); // すぐに描画します

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。脳卒中（）;

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

画像処理 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 Image Processing API パラメーターの説明」を参照してください。

これらの 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); // 画像サイズに応じてキャンバスサイズを指定します。 img.width Canvas.height = img.height // 画像を描画 ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) } }</script>

次の図に示すように、画像がキャンバスに描画されます。

ここでは主に、各ピクセルの RGBA 値を返すgetImageData関数を借用します。画像処理式を利用すると、ピクセルを操作して対応する数学的演算を実行できます。

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

gray = red * 0.3 + green * 0.59 + blue * 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 .長さ / 4; ++i) { var red = imgData.data[i * 4]、green = imgData.data[i * 4 + 1]、blue = imgData.data[i * 4 + 2]; var grey = 0.3 * red + 0.59 * green + 0.11 * blue; // RGB を更新します。 // imgData.data[i * 4 + 3] は保存されているのはアルファなので、変更する必要はありません。 imgData.data[i * 4 + 1] = grey; 4 + 2] = グレー } 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 .長さ / 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] はアルファを保存します。 imgData.data[i * 4] = 255 - imgData を変更する必要はありません。データ[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; * 4 + 2] = 255 - imgData.data[i * 4 + 2] } ctx.putImageData(imgData, 0, 0); // 画像データを書き換えます。

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

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。