この記事では、Canvas を使って簡単に画像処理を行うためのコードを紹介します。お困りの方は参考にしていただければ幸いです。ヘルプ。 デジタル製品が普及したこの時代、自宅でも外出先でも長距離旅行でも、写真を撮ることは欠かせないものになっています。しかし、カメラで直接撮影した写真には、私たちの心理的期待との間に一定のギャップがあることがよくあります。では、このギャップを減らすにはどうすればよいでしょうか?答えはビューティー P ピクチャです。さまざまな種類のビューティー カメラが登場し、P ピクチャは持ち運び可能なスキルになりました。 実際、いわゆる美しさは多くのフィルターを使用するだけであり、フィルターは特定のアルゴリズムを使用して画像のピクセルを操作し、特別な画像効果を取得します。 Photoshop を使用したことのある友人は、PS に多数のフィルターがあることを知っています。以下では、js Canvas テクノロジーを使用していくつかのフィルター効果を実現します。 私は最近、HTML5 のハイライトである canvas について学びました。キャンバスを使用することで、フロントエンド担当者が簡単に画像処理を行うことができます。 API はたくさんありますが、今回は主によく使われる API を学習し、次の 2 つのコードを完成させます。ネガカラー(反転カラー)フィルター 1 キャンバスをご存知ですか? 1.1 キャンバスとは何ですか? この HTML 要素は、クライアント側のベクター グラフィックス用に設計されています。独自の動作はありませんが、描画 API をクライアント JavaScript に公開して、スクリプトがキャンバスに必要なものを描画できるようにします。 1.2 Canvas、svg、vml の違いは何ですか? マークアップと SVG および VML の重要な違いは、 には JavaScript ベースの描画 API があるのに対し、SVG には JavaScript ベースの描画 API があることです。 VML では、XML ドキュメントを使用して図面を記述します。 2 キャンバス描画の学習ほとんどの Canvas 描画 API は、 要素自体では定義されていません。ただし、キャンバスの getContext() メソッドを通じて取得された「描画環境」オブジェクトで定義されています。 要素自体のデフォルトの幅と高さは、それぞれ 300 ピクセルと 150 ピクセルです。 2.1 キャンバスは長方形を描画します// 处理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 キャンバスはパスを描画します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 キャンバス描画テキストvar c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50);ログイン後にコピー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 であるとします。 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) } } ログイン後にコピー以下に示すように、画像がキャンバスに描画されます。 4 フィルターを実装します ここでは主に、各ピクセルの RGBA 値を返す getImageData 関数を借用します。画像処理式を利用すると、ピクセルを操作して対応する数学的演算を実行できます。 4.1 色除去効果色除去効果は、古いカメラで撮影された白黒写真と同等です。人間の目の感度に基づいて、人々は次の式を与えました: グレー = 赤 * 0.3 緑 * 0.59 青 * 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); // 重写图像数据 } } ログイン後にコピー レンダリングは次のとおりです。 要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、Html5 ビデオ チュートリアルをご覧ください。 関連する推奨事項: php 公共福祉トレーニング ビデオ チュートリアル HTML5 グラフィック チュートリアル HTML5オンライン マニュアル