この記事では、主に js を使用して画像をモザイク化する方法の例を紹介し、次のように共有します。 効果のデモンストレーション キャンバスの紹介
HTML5タグは、画像を描画するために使用されます(スクリプト、通常はJavaScript経由) ただし、要素自体には描画機能はありません (単なるグラフィックのコンテナーです)。実際の描画を行うにはスクリプトを使用する必要があります。 getContext() メソッドは、キャンバスに描画するためのメソッドとプロパティを提供するオブジェクトを返します。 このマニュアルでは、キャンバス上にテキスト、線、四角形、円などを描画するために使用できる getContext("2d") オブジェクトのプロパティとメソッドの完全なセットを提供します。
マークアップと SVG および VML との重要な違いは、JavaScript ベースの描画 API があるのに対し、SVG および VML は描画を記述するために XML ドキュメントを使用することです。 これら 2 つのアプローチは機能的に同等であり、どちらか一方を他方でシミュレートできます。表面的には非常に異なりますが、それぞれに長所と短所があります。たとえば、SVG 図面は、説明から要素を削除するだけで簡単に編集できます。 同じ図のマークアップから要素を削除するには、多くの場合、図面を消去して再描画する必要があります。 ナレッジポイントの紹介js を使用して画像を作成する img = new Image() とします。 //画像にリンクを付けることができます img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg' //または既存のローカル画像のパス//img.src = './download.jpg' //HTMLに追加 document.body.appendChild(img) キャンバス.getContext("2d")
ctx = Canvas.getContext(コンテキストID) とします。 ctx.drawImage()
context.drawImage(画像,x,y);
context.drawImage(画像、x、y、幅、高さ);
var imgData = context.getImageData(x,y,幅,高さ); ctx.putImageData()
次に、この小さな機能を完了するために、ステップバイステップで説明してください〜 ステップバイステップイメージを準備し、メソッドを追加します <本文> <img src="./download.jpg"> <button onclick="addCanvas()">キャンバスを生成</button> <button onclick="generateImg()">画像を生成</button> </本文> 次に 関数addCanvas() { bt = document.querySelector('button') とします。 let img = new Image(); //1. 画像をコピーする準備をする img.src = './download.jpg'; img.onload = function() { //2. 画像が読み込まれるのを待ちます。let width = this.width 高さを this.height とします let canvas = document.createElement('canvas') //3. キャンバスを作成します。let ctx = canvas.getContext("2d"); //4. キャンバスのコンテンツを取得します。canvas.setAttribute('width', width) //5. 統一性を保つために、キャンバスの幅と高さを画像の幅と高さに設定します。canvas.setAttribute('height', height) ctx.drawImage(this, 0, 0, width, height); //5. キャンバスに画像を描画します document.body.insertBefore(canvas, bt) //5. ボタンの前にキャンバスを挿入します} } キャンバスに画像を正常に取得しました: さて、成功に向けて小さな一歩を踏み出しましたが、次は何をすべきでしょうか? …さて、マウスを押すプロセスを表すにはネイティブの そうです、キャンバス上でモザイク操作を実行したいので、これらの2つのイベントをキャンバス要素に追加する必要があります。 キャンバスを作成するプロセスが少し複雑であることを考慮して、モジュールのカプセル化を作成しましょう。 関数addCanvas() { bt = document.querySelector('button') とします。 img = new Image(); img.src = './download.jpg'; //ここに自分の写真を入れてください img.onload = function() { 幅 = this.width とします 高さを this.height とします させて { キャンバス、 ctx } = createCanvasAndCtx(width, height) //オブジェクトの分解はキャンバスとctxを受け取ります ctx.drawImage(this, 0, 0, 幅, 高さ); document.body.insertBefore(キャンバス、bt) } } 関数createCanvasAndCtx(幅, 高さ) { キャンバスを document.createElement('キャンバス') にします。 キャンバス.setAttribute('幅', 幅) キャンバス.setAttribute('height', 高さ) canvas.setAttribute('onmouseout', 'end()') //マウスがキャンバスから離れないように修正 canvas.setAttribute('onmousedown', 'start()') //マウスダウンを追加 canvas.setAttribute('onmouseup', 'end()') //マウスアップを追加 let ctx = canvas.getContext("2d"); 戻る { キャンバス、 ctx } } 関数開始() { キャンバスを document.querySelector('キャンバス') にします。 キャンバス.onmousemove = () => { console.log('マウスを押して動かしました') } } 関数終了() { キャンバスを document.querySelector('キャンバス') にします。 キャンバス.onmousemove = null }
さて、この時点では、コードはまだ期待どおりに動作しています。 次の課題はより困難です。ピクセルを取得して処理する必要があります。start() 関数をもう一度書き直してみましょう。 関数開始() { img = document.querySelector('img') とします。 キャンバスを document.querySelector('キャンバス') にします。 ctx = canvas.getContext("2d"); とします。 imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); キャンバス.onmousemove = (e) => { let w = imgData.width; //1. 画像の幅と高さを取得します。let h = imgData.height; //モザイクの度合い。数字が大きいほどぼやけます。let num = 10; //マウスが現在位置するピクセルのRGBAを取得します color = getXY(imgData, e.offsetX, e.offsetY); (k = 0; k < num; k++) の場合 { (l = 0; l < num; l++) の場合 { //座標 (e.offsetX + l, e.offsetY + k) で imgData の色を設定します。setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //キャンバスデータを更新 ctx.putImageData(imgData, 0, 0); } } //ここにはsetXYとgetXYという2つの関数があります。興味があれば、取得の原理を学ぶことができます。function setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } 関数 getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; 色[0] = obj.data[4 * (y * w + x)]; 色[1] = obj.data[4 * (y * w + x) + 1]; 色[2] = obj.data[4 * (y * w + x) + 2]; 色[3] = obj.data[4 * (y * w + x) + 3]; 色を返します。 } さて、成功はそう遠くありません。最後のステップは画像を生成することです。 幸いなことに、canavs はキャンバスを Base64 でエンコードされた画像として直接エクスポートする直接的な方法を提供します。 関数generateImg() { キャンバスを document.querySelector('キャンバス') にします。 var newImg = 新しい画像(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(新しい画像、キャンバス) } 最終結果: とても簡単でしょう? 手書きのコードが次のコードと同じかどうか確認してみましょう。 完全なコード<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> </head> <本文> <本文> <img src="./download.jpg"> <button onclick="addCanvas()">キャンバスを生成</button> <button onclick="generateImg()">画像を生成</button> </本文> <スクリプト> 関数addCanvas() { bt = document.querySelector('button') とします。 img = new Image(); img.src = './download.jpg'; //ここに自分の写真を入れてください img.onload = function() { 幅 = this.width とします 高さを this.height とします させて { キャンバス、 ctx } = createCanvasAndCtx(幅, 高さ) ctx.drawImage(this, 0, 0, 幅, 高さ); document.body.insertBefore(キャンバス、bt) } } 関数createCanvasAndCtx(幅, 高さ) { キャンバスを document.createElement('キャンバス') にします。 キャンバス.setAttribute('幅', 幅) キャンバス.setAttribute('height', 高さ) キャンバス.setAttribute('onmouseout', 'end()') キャンバス.setAttribute('onmousedown', 'start()') キャンバス.setAttribute('onmouseup', 'end()') ctx = canvas.getContext("2d"); とします。 戻る { キャンバス、 ctx } } 関数開始() { img = document.querySelector('img') とします。 キャンバスを document.querySelector('キャンバス') にします。 ctx = canvas.getContext("2d"); とします。 imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); キャンバス.onmousemove = (e) => { let w = imgData.width; //1. 画像の幅と高さを取得します。let h = imgData.height; //モザイクの度合い。数字が大きいほどぼやけます。let num = 10; //マウスが現在位置するピクセルのRGBAを取得します color = getXY(imgData, e.offsetX, e.offsetY); (k = 0; k < num; k++) の場合 { (l = 0; l < num; l++ とします) { //座標 (e.offsetX + l, e.offsetY + k) で imgData の色を設定します。setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //キャンバスデータを更新 ctx.putImageData(imgData, 0, 0); } } 関数generateImg() { キャンバスを document.querySelector('キャンバス') にします。 var newImg = 新しい画像(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(新しい画像、キャンバス) } 関数setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } 関数 getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; 色[0] = obj.data[4 * (y * w + x)]; 色[1] = obj.data[4 * (y * w + x) + 1]; 色[2] = obj.data[4 * (y * w + x) + 2]; 色[3] = obj.data[4 * (y * w + x) + 3]; 色を返します。 } 関数終了() { キャンバスを document.querySelector('キャンバス') にします。 キャンバス.onmousemove = null } </スクリプト> </本文> </html> もちろん、もっといろいろな創作ができます。例えば、上のモザイクは正方形ですが、数学の知識を使って円形にして、円の中心をマウスの中心にして広げることもできます。 いくつかのプロセスを改善することもできます。たとえば、モザイクの位置が間違っている場合は、キャンバスをクリアしてやり直すことができます。 js を使って画像をモザイクする例についての記事はこれで終わりです。より関連性の高い js 画像モザイクコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker を使用して Spring Boot をデプロイする方法
これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...
テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...
目次ZabbixはNginxを監視するZabbixはTomcatを監視するZabbixはMySQLを...
処理能力と同時実行性を向上させるために、Web コンテナは通常、リクエストを処理するタスクをスレッド...
とても嬉しいです。この問題に遭遇したとき、私はDockerコンテナのプロセス原理について話さなければ...
1. MySQL 独自のストレステストツール - Mysqlslap mysqlslap は、mys...
1. 2 列レイアウトとは何ですか? 2 列レイアウトには、左側が固定幅で右側が適応幅のレイアウトと...
目次序文解決具体的な実装満たすべき前提条件質問序文テーブルをよく使用します。データ量が多い場合は直接...
1. MySQL 自己接続MySQL では、情報を照会するときに自分自身に接続 (自己接続) する必...
目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...
CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...
この記事では、カードフリップ効果を実現するためのVueの具体的なコードを例として紹介します。具体的な...
背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...
目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....
最近、Ant Design Blazor コンポーネント ライブラリにマルチタブ コンポーネントを実...