Beranda>Tutorial Desain Web>tutorial HTML

Cara menggunakan kanvas untuk mengimplementasikan fungsi pengkodean gambar langkah demi langkah

Penulis：Eve Cole Waktu Pembaruan：2025-03-11 23:32:01
Alamat asli

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

Alamat pratinjau

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

Persiapan

demo berdasarkan vue + elemen-ui

Pertama buat file html dan perkenalkan vue dan elemen-ui (perhatikan bahwa ada juga file gaya) 

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>Dokumen</title> <!-- elelment-ui style--> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css></head><body> </body><!-- Perkenalkan vue --><script src=https: //cdn.jsdelivr.net/npm/vue></script><!-- Perkenalkan elemen-ui --><script src=https://unpkg.com/element-ui/lib/index.js></script></html>

Selanjutnya kita bisa menulis fungsi coding kita

Ide implementasi

  • Buat kanvas dan gambarlah gambar yang akan diberi kode di atasnya
  • Pantau klik mouse pada gambar, pindahkan dan lepaskan peristiwa, dan gambar area yang akan diberi kode di kanvas.
  • Proses area pengkodean yang digambar
  • Simpan gambar yang diberi kode

Gambarlah gambar yang akan diberi kode ke kanvas 

 // Inisialisasi gambar gambar toCode (currentImg) { this.$nextTick(() => { // Dapatkan node elemen induk dari kanvas yang akan digambar let parentId = document.getElementById('parentId') // Inisialisasi gambar biarkan drawImg = Gambar baru() drawImg.setAttribute('crossOrigin', 'anonim') drawImg.crossOrigin = 'Anonim' drawImg.src = currentImg // Membuat elemen kanvas dan menambahkannya ke node induk let addCanvas = document.createElement('canvas') parentId.appendChild(addCanvas) let canvas = parentId.lastElementChild canvas.id = 'imgCanvas' if (canvas.getContext) { let ctx = canvas.getContext('2d') // Menggambar gambar drawImg.onload = function () { canvas.width = 720 kanvas.tinggi = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } })}
Klik tombol pengkodean untuk menggambar area pengkodean

Ide:

  • Klik mouse untuk mendapatkan koordinat klik. Mungkin ada area berkode sebelum setiap klik.
  • Gerakkan mouse dan mulailah menggambar persegi panjang berkode. Koordinat, lebar dan tinggi persegi panjang yang digambar ditentukan oleh koordinat yang dipindahkan dan koordinat titik yang diklik di atas.
  • Bagilah persegi panjang pengkodean yang digambar menjadi kotak-kotak kecil dengan lebar dan tinggi 15 piksel, dan beri warna acak pada setiap kotak kecil.
  • Lepaskan mouse untuk berhenti menggambar persegi panjang 
 // Pengodean dialogCode (img) { biarkan parentId = document.getElementById('parentId') biarkan kanvas = document.getElementById('imgCanvas') if (canvas.getContext) { biarkan ctx = kanvas.getContext('2d') biarkan drawImage = Gambar baru() drawImage.crossOrigin = 'Anonim' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } // Klik mouse parentId.onmousedown = e => { ctx.clearRect(0, 0, canvas.width, canvas. tinggi) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // X saat mouse diklik this.clickY = e.offsetY // Y saat mouse diklik } // ParentId.onmouseup = () => { flag ini = false } // Mouse menekan parentId.onmousemove = e => { if (this.flag) { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(drawImage, 0, 0, 720, 500) ctx.beginPath() let pixel = [] // Array dua dimensi, setiap sub-array mempunyai 5 nilai (gambar koordinat X, koordinat y dari sudut kiri atas persegi panjang, persegi panjang Lebar dan tinggi, angka acak 4 digit yang dihasilkan digunakan untuk nilai warna) untuk (misalkan x = 0;x < (e.offsetX - this.clickX) / 15; x++) { for (misalkan 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)]) } untuk (misalkan 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 (misalkan x = 0; x > (e.offsetX - this.clickX) / 15; x--) { for (misalkan 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 (misalkan y = 0; y < (e.offsetY - this.clickY) / 15; y++) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Matematika. random() * 9999)]) } } // Lintasi array untuk menggambar blok persegi kecil untuk (misalkan i = 0; i < pixel.length; i++) { ctx.fillStyle = '#bf' + piksel[i][4] ctx.fillRect(piksel[i][0], piksel[i][1], piksel[i][2], piksel[i][ 3]) } ctx.isi() ctx.closePath() } } }}

menyimpan 

 // Simpan dialogUpload () { biarkan kanvas = document.getElementById('imgCanvas') biarkan tempImg = kanvas.toDataURL('image/png') biarkan imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonim' imgURL .src = tempImg}
Kode sumber

Salin ke file html untuk pratinjau 

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=edge> <title>Gunakan kanvas untuk menerapkan pengkodean gambar langkah demi langkah</title> <!-- elelment-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>Gunakan kanvas di proyek vue untuk mengimplementasikan fungsi pengkodean gambar langkah demi langkah</h1> <el-button type=primary @click=dialogCode(data.img_url)>Pengkodean</el-button> <el-button type=success @click=dialogUpload()>Simpan</el-button> </div> <el-row > <el-col :span=12><h3>Klik tombol pengkodean untuk menggambar area pengkodean pada gambar; klik Simpan untuk menghasilkan gambar berkode</h3></el-col> <el-col :span=12><h3>Gambar tersimpan</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><!-- Perkenalkan vue --><script src=https://cdn.jsdelivr.net/npm/vue></script><!--Memperkenalkan elemen-ui --><script src=https://unpkg.com/element-ui/lib/index .js></script><script>Vue baru({ el: '#app', data () { return { data: { img_url: 'https://avatars0.githubusercontent.com/u/26196557?s=460&v=4' }, flag: false, // Apakah akan menggambar persegi panjang klikX: '', // Saat mulai menggambar persegi panjang, x koordinat klik mouse klikY: '' // Saat mulai menggambar persegi panjang, koordinat y saat mouse diklik} }, mount() { this.toCode(this.data.img_url) }, metode: { // Inisialisasi gambar gambar keCode (currentImg) { this.$nextTick(() => { let parentId = document.getElementById('parentId') let drawImg = new Image() drawImg.setAttribute('crossOrigin', 'anonymous') drawImg. crossOrigin = 'Anonim' drawImg.src = currentImg biarkan addCanvas = document.createElement('canvas') parentId.appendChild(addCanvas) biarkan kanvas = parentId.lastElementChild canvas.id = 'imgCanvas' if (canvas.getContext) { biarkan ctx = canvas.getContext('2d') drawImg.onload = function () { canvas.width = 720 kanvas.tinggi = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } }) }, // Pengkodean dialogCode (img) { biarkan parentId = document.getElementById('parentId') biarkan kanvas = document.getElementById('imgCanvas') if (canvas.getContext) { biarkan ctx = kanvas . getContext('2d') biarkan drawImage = Gambar baru() drawImage.crossOrigin = 'Anonim' drawImage.src = img drawImage.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 saat mouse diklik this.clickY = e.offsetY // Y saat mouse diklik } parentId.onmouseup = () => { this.flag = false } parentId.onmousemove = e => { if (bendera ini) { ctx.clearRect(0, 0, kanvas.lebar, kanvas.tinggi) ctx.drawImage(drawImage, 0, 0, 720, 500) ctx.beginPath() let pixel = [] // Array dua dimensi, setiap sub-array mempunyai 5 nilai (gambar koordinat X, koordinat y dari sudut kiri atas persegi panjang, persegi panjang Lebar dan tinggi, angka acak 4 digit yang dihasilkan digunakan untuk nilai warna) untuk (misalkan x = 0;x < (e.offsetX - this.clickX) / 15; x++) { for (misalkan 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)]) } untuk (misalkan 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 (misalkan x = 0; x > (e.offsetX - this.clickX) / 15; x--) { for (misalkan 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 (misalkan y = 0; y < (e.offsetY - this.clickY) / 15; y++) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Matematika. acak() * 9999)]) } } untuk (misalkan i = 0; i < piksel.panjang; i++) { ctx.fillStyle = '#bf' + piksel[i][4] ctx.fillRect(piksel[i][0], piksel[i][1], piksel[i][2], piksel[i][3]) } ctx .fill() ctx.closePath() } } } }, // Simpan dialogUpload () { biarkan kanvas = document.getElementById('imgCanvas') biarkan tempImg = canvas.toDataURL('image/png') biarkan imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonim' imgURL.src = tempImg } }})</script></html>

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.

Artikel Terkait