ホーム>Web デザインのチュートリアル>HTMLチュートリアル

Canvas を使用して画像コーディング機能を段階的に実装する方法

著者：Eve Cole 更新時間：2025-03-11 23:32:01
元のアドレス

https://github.com/MY729/front-common-funtion/blob/master/picture-code-demo/README.md

プレビューアドレス

https://my729.github.io/front-common-funtion/picture-code-demo/picture-code.html

準備

vue + element-ui に基づくデモ

まずhtmlファイルを作成し、vueとel​​ement-uiを導入します（スタイルファイルもあるので注意） 

 <!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>ドキュメント</title> <!-- element-ui style--> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css></head><body> </body><!--vue の紹介 --><script src=https: //cdn.jsdelivr.net/npm/vue></script><!-- element-ui を導入します --><script src=https://unpkg.com/element-ui/lib/index.js></script></html>

次に、コーディング関数を記述します。

実装のアイデア

  • キャンバスを作成し、その上にコーディングする絵を描きます
  • 画像上でのマウスのクリックを監視し、イベントの移動と解放を行い、コーディングする領域をキャンバス上に描画します。
  • 描画したコーディング領域を加工する
  • コード化された画像を保存する

コード化する絵をキャンバスに描きます

 // 描画画像の初期化 toCode (currentImg) { this.$nextTick(() => { // 描画するキャンバスの親要素ノードを取得 letparentId = document.getElementById('parentId') // 画像の初期化letdrawImg = new Image()drawImg.setAttribute('crossOrigin', 'anonymous')drawImg.crossOrigin = 'Anonymous'drawImg.src = currentImg // Canvas 要素を作成し、親ノードに追加します let addCanvas = document.createElement('canvas')parentId.appendChild(addCanvas) let Canvas =parentId.lastElementChild Canvas.id = 'imgCanvas' if (canvas.getContext) { let ctx = Canvas.getContext('2d') // 絵を描くdrawImg.onload = function () { Canvas.width = 720 Canvas.height = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } })}
コーディングボタンをクリックしてコーディング領域を描画します

アイデア：

  • マウスをクリックしてクリックの座標を取得します。最初にキャンバスをクリアして、画像を再描画します。
  • マウスを移動し、コード化された四角形の描画を開始します。描画される四角形の座標、幅、高さは、移動した座標と上でクリックした点の座標によって決まります。
  • 描画したコーディング長方形を幅と高さ 15 ピクセルの小さな正方形に分割し、それぞれの小さな正方形にランダムな色を付けます。
  • マウスを放すと長方形の描画が停止します
 // コーディングダイアログコード (img) { letparentId = document.getElementById('parentId') let Canvas = document.getElementById('imgCanvas') if (canvas.getContext) { let ctx = Canvas.getContext('2d') letdrawImage = new Image()drawImage.crossOrigin = '匿名'drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } // マウスクリックparentId.onmousedown = e => { ctx.clearRect(0, 0, Canvas.width, Canvas.高さ) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // マウスがクリックされた場合は X this.clickY = e.offsetY // マウスがクリックされた場合は Y } // ParentId.onmouseup = () => { this.flag = false } // マウスが押されたparentId.onmousemove = e => { if (this.flag) { ctx.clearRect(0, 0, Canvas.width, Canvas.height) ctx.drawImage(drawImage, 0, 0, 720, 500) ctx.beginPath() letPixels = [] // 2 次元配列、各サブ配列には 5 つの値があります (X 座標、Y 座標を描画します)長方形の左上隅、長方形の幅と高さ、色の値には生成された 4 桁の乱数が使用されます) for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) { for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) {Pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY ), 15, 15, Math.floor(Math.random() * 9999)]) } for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) { ピクセル.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor( Math.random() * 9999)]) } } for (let x = 0; x > (e.offsetX - this.clickX) / 15; x--) { for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) { ピクセル.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)]) } for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) { ピクセル.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math. random() * 9999)]) } } // 配列を走査し、(let i = 0; i < Pixels.length; i++) の小さな正方形のブロックを描画します。 { ctx.fillStyle = '#bf' + ピクセル[i][4] ctx.fillRect(ピクセル[i][0], ピクセル[i][1], ピクセル[i][2], ピクセル[i][ 3]) } ctx.fill() ctx.closePath() } } }}

保存

 // DialogUpload を保存 () { let Canvas = document.getElementById('imgCanvas') let tempImg = Canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonymous' imgURL .src = tempImg}
ソースコード

プレビュー用に HTML ファイルにコピー

 <!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>キャンバスを使用して画像コーディング機能を段階的に実装する</title> <!-- element-ui style--> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css> <style type=text/css> .rc-code__buttons { margin: 20px; </style></head> <body> <div id=app> <div class=rc-code__buttons> <h1>vue プロジェクトでキャンバスを使用して、画像コーディング関数を段階的に実装します</h1> <el-button type=primary @click=dialogCode(data.img_url)>コーディング</el-button> <el-button type=success @click=dialogUpload()>保存</el-button> </div> <el-row > <el-col :span=12><h3>コーディング ボタンをクリックして画像上にコーディング領域を描画し、[保存] をクリックしてコード化された画像を生成します。</h3></el-col> <el-col :span=12><h3>保存された画像</h3></el-col> <el-col :span=12><div id=parentId></div></el-col> <el-col : span=12><img id=imgURL/></el-col> </el-row> </div></body><!-- vue の導入 --><script src=https://cdn.jsdelivr.net/npm/vue></script><!--element-ui の紹介 --><script src=https://unpkg.com/element-ui/lib/index .js></script><script>new Vue({ el: '#app', data () { return { data: { img_url: 'https://avatars0.githubusercontent.com/u/26196557?s=460&v=4' }, flag: false, // 長方形を描画するかどうか clickX: '', // 長方形の描画を開始するとき、xマウスクリックの座標 clickY: '' // 四角形の描画を開始するとき、マウスがクリックされたときの Y 座標 } }, Mounted() { this.toCode(this.data.img_url) }, Methods: { //描画画像をCode (currentImg) { this.$nextTick(() => { letparentId = document.getElementById('parentId') letdrawImg = new Image()drawImg.setAttribute('crossOrigin', 'anonymous')drawImgに初期化します。 crossOrigin = 'Anonymous'drawImg.src = currentImg let addCanvas = document.createElement('canvas') parentId.appendChild(addCanvas) let Canvas =parentId.lastElementChild Canvas.id = 'imgCanvas' if (canvas.getContext) { let ctx = Canvas.getContext('2d')drawImg.onload = function () { Canvas.width = 720 Canvas.height = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } }) }, // コーディングダイアログコード (img) { letparentId = document.getElementById('parentId') let Canvas = document.getElementById('imgCanvas') if (canvas.getContext) { let ctx = Canvas 。 getContext('2d') letdrawImage = new Image()drawImage.crossOrigin = 'Anonymous' drawImage.src = imgdrawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) }parentId.onmousedown = e => { ctx.clearRect(0, 0, Canvas.width, Canvas) .height) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // マウスがクリックされたときは X this.clickY = e.offsetY // マウスがクリックされたときは Y }parentId.onmouseup = () => { this.flag = false }parentId.onmousemove = e => { if (this.flag) { ctx.clearRect(0, 0, Canvas.width, Canvas.height) ctx.drawImage(drawImage, 0, 0, 720, 500) ctx.beginPath() letPixels = [] // 2 次元配列、各サブ配列には 5 つの値があります (X 座標、Y 座標を描画します)長方形の左上隅、長方形の幅と高さ、色の値には生成された 4 桁の乱数が使用されます) for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) { for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) {Pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY ), 15, 15, Math.floor(Math.random() * 9999)]) } for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) { ピクセル.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor( Math.random() * 9999)]) } } for (let x = 0; x > (e.offsetX - this.clickX) / 15; x--) { for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) { ピクセル.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)]) } for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) { ピクセル.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.ランダム() * 9999)]) } } for (let i = 0; i < ピクセル.長さ; i++) { ctx.fillStyle = '#bf' + ピクセル[i][4] ctx.fillRect(ピクセル[i][0], ピクセル[i][1], ピクセル[i][2], ピクセル[i][3]) } ctx .fill() ctx.closePath() } } } }, //保存ダイアログアップロード () { let Canvas = document.getElementById('imgCanvas') let tempImg = Canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonymous' imgURL.src = tempImg } }})</script></html>

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

関連記事