Comment utiliser Canvas pour implémenter la fonction de codage d'image étape par étape

Auteur：Eve Cole Date de mise à jour：2025-03-11 23:32:01

Adresse d'origine

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

Adresse d'aperçu

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

Préparation

démo basée sur vue + element-ui

Créez d'abord un fichier html et introduisez vue et element-ui (notez qu'il existe également des fichiers de style)

 <!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>Document</title> <!-- elelment-ui style--> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css></head><body> </body><!-- Présentez vue --><script src=https : //cdn.jsdelivr.net/npm/vue></script><!-- Présentez element-ui --><script src=https://unpkg.com/element-ui/lib/index.js></script></html>

Ensuite, nous pouvons écrire notre fonction de codage

Idées de mise en œuvre

Créez une toile et dessinez l'image à coder dessus
Surveillez les clics de souris sur l'image, déplacez et relâchez les événements et dessinez la zone à coder sur la toile.
Traiter la zone de codage dessinée
Enregistrez l'image codée

Dessinez l'image à coder sur la toile

 // Initialise l'image de dessin toCode (currentImg) { this.$nextTick(() => { // Récupère le nœud de l'élément parent du canevas à dessiner let parentId = document.getElementById('parentId') // Initialise l'image let drawImg = new Image() drawImg.setAttribute('crossOrigin', 'anonymous') drawImg.crossOrigin = 'Anonyme' drawImg.src = currentImg // Créez un élément de canevas et ajoutez-le au nœud parent let addCanvas = document.createElement('canvas') parentId.appendChild(addCanvas) let canvas = parentId.lastElementChild canvas.id = 'imgCanvas' if (canvas.getContext) { let ctx = canvas.getContext('2d') // Dessine l'image drawImg.onload = function () { canvas.width = 720 toile.hauteur = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } })}

Cliquez sur le bouton de codage pour dessiner la zone de codage

Idée:

Cliquez avec la souris pour obtenir les coordonnées du clic. Il peut y avoir des zones codées avant chaque clic. Effacez d'abord le canevas et redessinez l'image.
Déplacez la souris et commencez à dessiner le rectangle codé. Les coordonnées, la largeur et la hauteur du rectangle dessiné sont déterminées par les coordonnées déplacées et les coordonnées du point cliqué ci-dessus.
Divisez le rectangle de codage dessiné en petits carrés d'une largeur et d'une hauteur de 15 pixels et attribuez à chaque petit carré une couleur aléatoire.
Relâchez la souris pour arrêter de dessiner le rectangle

 // Codage 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 = 'Anonyme' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } // Clic de souris parentId.onmousedown = e => { ctx.clearRect(0, 0, canvas.width, canvas. hauteur) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // X lorsque l'on clique sur la souris this.clickY = e.offsetY // Y lorsque l'on clique sur la souris } // ParentId.onmouseup = () => { this. = false } // Souris appuyée 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 = [] // Tableau bidimensionnel, chaque sous-tableau a 5 valeurs (dessinez la coordonnée X, la coordonnée y du coin supérieur gauche du rectangle, le rectangle La largeur et la hauteur, le nombre aléatoire à 4 chiffres généré est utilisé pour la valeur de couleur) pour (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)]) } pour (soit 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)]) } } pour (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)]) } pour (soit 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)]) } } // Parcourez le tableau pour dessiner de petits blocs carrés pour (soit 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() } } }}

sauvegarder

 // Enregistrer dialogUpload () { let canvas = document.getElementById('imgCanvas') let tempImg = canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonyme' imgURL .src = tempImg}

Code source

Copier dans un fichier HTML pour un aperçu

 <!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>Utilisez Canvas pour implémenter le codage d'image étape par étape</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>Utilisez Canvas dans le projet Vue pour implémenter la fonction de codage d'image étape par étape</h1> <el-button type=primary @click=dialogCode(data.img_url)>Codage</el-button> <el-button type=success @click=dialogUpload()>Enregistrer</el-button> </div> <el-row > <el-col :span=12><h3>Cliquez sur le bouton de codage pour dessiner la zone de codage sur l'image ; cliquez sur Enregistrer pour générer l'image codée</h3></el-col> <el-col :span=12><h3>Image enregistrée</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><!-- Présenter vue --><script src=https://cdn.jsdelivr.net/npm/vue></script><!--Présentation de 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, // S'il faut dessiner un rectangle, cliquez sur X : '', // Lorsque vous commencez à dessiner un rectangle, le x coordonnée du clic de souris clickY : '' // Lorsque vous commencez à dessiner le rectangle, la coordonnée y lorsque la souris clique} }, Mounted() { this.toCode(this.data.img_url) }, méthodes : { // Initialisez les images de dessin toCode (currentImg) { this.$nextTick(() => { let parentId = document.getElementById('parentId') let drawImg = new Image() drawImg.setAttribute('crossOrigin', 'anonymous') drawImg. crossOrigin = 'Anonyme' 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 toile.hauteur = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } }) }, // Codage 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 = 'Anonyme' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } parentId.onmousedown = e => { ctx.clearRect(0, 0, canvas.width, canvas .hauteur) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // X lorsque la souris est cliquée this.clickY = e.offsetY // Y lorsque la souris est cliquée } 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 = [] // Tableau bidimensionnel, chaque sous-tableau a 5 valeurs (dessinez la coordonnée X, la coordonnée y du coin supérieur gauche du rectangle, le rectangle La largeur et la hauteur, le nombre aléatoire à 4 chiffres généré est utilisé pour la valeur de couleur) pour (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)]) } pour (soit 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)]) } } pour (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)]) } pour (soit 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 (soit 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() } } } }, // Enregistrer dialogUpload () { let canvas = document.getElementById('imgCanvas') let tempImg = canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonyme' imgURL.src = tempImg } }})</script></html>

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.