So verwenden Sie Canvas, um die Bildcodierungsfunktion Schritt für Schritt zu implementieren

Autor：Eve Cole Aktualisierungszeit：2025-03-11 23:32:01

Ursprüngliche Adresse

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

Vorschauadresse

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

Vorbereitung

Demo basierend auf Vue + Element-UI

Erstellen Sie zunächst eine HTML-Datei und führen Sie Vue und Element-UI ein (beachten Sie, dass es auch Stildateien gibt).

 <!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 -Kompatibler Inhalt=ie=edge> <title>Dokument</title> <!-- elelment-ui style--> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css></head><body> </body><!-- Introduce vue --><script src=https: //cdn.jsdelivr.net/npm/vue></script><!-- Element-ui vorstellen --><script src=https://unpkg.com/element-ui/lib/index.js></script></html>

Als nächstes können wir unsere Codierungsfunktion schreiben

Umsetzungsideen

Erstellen Sie eine Leinwand und zeichnen Sie das zu codierende Bild darauf
Überwachen Sie Mausklicks auf dem Bild, verschieben und lösen Sie Ereignisse und zeichnen Sie den zu codierenden Bereich auf der Leinwand.
Bearbeiten Sie den gezeichneten Codierungsbereich
Speichern Sie das codierte Bild

Zeichnen Sie das zu kodierende Bild auf die Leinwand

 // Das Zeichnungsbild initialisieren toCode (currentImg) { this.$nextTick(() => { // Den übergeordneten Elementknoten der zu zeichnenden Leinwand abrufen let parentId = document.getElementById('parentId') // Das Bild initialisieren let drawImg = new Image() drawImg.setAttribute('crossOrigin', 'anonymous') drawImg.crossOrigin = 'Anonymous' drawImg.src = currentImg // Ein Canvas-Element erstellen und zum übergeordneten Knoten hinzufügen let addCanvas = document.createElement('canvas') parentId.appendChild(addCanvas) let canvas = parentId.lastElementChild canvas.id = 'imgCanvas' if (canvas.getContext) { let ctx = canvas.getContext('2d') // Das Bild zeichnen drawImg.onload = function () { canvas.width = 720 canvas.height = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } })}

Klicken Sie auf die Codierungsschaltfläche, um den Codierungsbereich zu zeichnen

Idee:

Klicken Sie mit der Maus, um die Koordinaten des Klicks zu erhalten. Vor jedem Klick können codierte Bereiche vorhanden sein. Löschen Sie zunächst die Leinwand und zeichnen Sie das Bild neu.
Bewegen Sie die Maus und beginnen Sie mit dem Zeichnen des codierten Rechtecks. Die Koordinaten, Breite und Höhe des gezeichneten Rechtecks werden durch die verschobenen Koordinaten und die Koordinaten des oben angeklickten Punktes bestimmt.
Teilen Sie das gezeichnete Codierungsrechteck in kleine Quadrate mit einer Breite und Höhe von 15 Pixeln auf und geben Sie jedem kleinen Quadrat eine zufällige Farbe.
Lassen Sie die Maustaste los, um das Zeichnen des Rechtecks zu beenden

 // Codierung dialogCode (img) { let parentId = document.getElementById('parentId') let canvas = document.getElementById('imgCanvas') if (canvas.getContext) { let ctx = canvas.getContext('2d') let drawImage = new Image() drawImage.crossOrigin = 'Anonymous' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } // Mausklick parentId.onmousedown = e => { ctx.clearRect(0, 0, canvas.width, canvas. Höhe) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // X, wenn mit der Maus geklickt wird this.clickY = e.offsetY // Y, wenn mit der Maus geklickt wird } // ParentId.onmouseup = () => { this = false } // Maus gedrückt parentId.onmousemove = e => { if (this.flag) { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(drawImage, 0, 0, 720, 500) ctx.beginPath() let pixels = [] // Zweidimensionales Array, jedes Unterarray hat 5 Werte (Zeichnen Sie die X-Koordinate, die Y-Koordinate des obere linke Ecke des Rechtecks, die Breite und Höhe des Rechtecks, die generierte 4-stellige Zufallszahl wird für den Farbwert verwendet) for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) { for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) { pixels.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--) { pixels.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--) { pixels.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++) { pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math. random() * 9999)]) } } // Das Array durchlaufen, um kleine quadratische Blöcke zu zeichnen für (let i = 0; i < pixels.length; i++) { ctx.fillStyle = '#bf' + pixels[i][4] ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][ 3]) } ctx.fill() ctx.closePath() } } }}

speichern

 // DialogUpload () speichern .src = tempImg}

Quellcode

Zur Vorschau in eine HTML-Datei kopieren

 <!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 -Compatible content=ie=edge> <title>Verwenden Sie Canvas, um die Bildcodierung Schritt für Schritt zu implementieren</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>Verwenden Sie Canvas im Vue-Projekt, um die Bildcodierungsfunktion Schritt für Schritt zu implementieren</h1> <el-button type=primary @click=dialogCode(data.img_url)>Coding</el-button> <el-button type=success @click=dialogUpload()>Save</el-button> </div> <el-row > <el-col :span=12><h3>Klicken Sie auf die Codierungsschaltfläche, um den Codierungsbereich auf dem Bild zu zeichnen. Klicken Sie auf Speichern, um das codierte Bild zu generieren.</h3></el-col> <el-col :span=12><h3>Gespeichertes Bild</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 vorstellen --><script src=https://cdn.jsdelivr.net/npm/vue></script><!--Einführung in 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, // Ob ein Rechteck gezeichnet werden soll clickX: '', // Wenn mit dem Zeichnen eines Rechtecks begonnen wird, wird das x Koordinate des Mausklicks clickY: '' // Wenn mit dem Zeichnen des Rechtecks begonnen wird, die y-Koordinate, wenn die Maus klickt} }, mount() { this.toCode(this.data.img_url) }, Methoden: { // Zeichnungsbilder initialisieren toCode (currentImg) { this.$nextTick(() => { let parentId = document.getElementById('parentId') let drawImg = 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) } } }) }, // Codierung dialogCode (img) { let parentId = document.getElementById('parentId') let canvas = document.getElementById('imgCanvas') if (canvas.getContext) { let ctx = canvas . getContext('2d') let drawImage = new Image() drawImage.crossOrigin = 'Anonymous' 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, wenn mit der Maus geklickt wird this.clickY = e.offsetY // Y, wenn mit der Maus geklickt wird } 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() let pixels = [] // Zweidimensionales Array, jedes Unterarray hat 5 Werte (Zeichnen Sie die X-Koordinate, die Y-Koordinate des obere linke Ecke des Rechtecks, die Breite und Höhe des Rechtecks, die generierte 4-stellige Zufallszahl wird für den Farbwert verwendet) for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) { for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) { pixels.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--) { pixels.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--) { pixels.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++) { pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math. random() * 9999)]) } } for (let i = 0; i < pixels.length; i++) { ctx.fillStyle = '#bf' + pixels[i][4] ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3]) } ctx .fill() ctx.closePath() } } } }, // Speichern dialogUpload () { let canvas = document.getElementById('imgCanvas') let tempImg = canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonymous' imgURL.src = tempImg } }})</script></html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.