https://github.com/MY729/front-common-funtion/blob/master/picture-code-demo/README.md
Vista previa de direcciónhttps://my729.github.io/front-common-funtion/picture-code-demo/picture-code.html
Preparacióndemostración basada en vue + element-ui
Primero cree un archivo html e introduzca vue y element-ui (tenga en cuenta que también hay archivos de estilo)
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=es decir=edge> <título>Documento</título> <!-- estilo elelment-ui--> <enlace rel=hoja de estilo href=https://unpkg.com/element-ui/lib/theme-chalk/index.css></head><body> </body><!-- Introducir vue --><script src=https: //cdn.jsdelivr.net/npm/vue></script><!-- Introducir elemento-ui --><script src=https://unpkg.com/element-ui/lib/index.js></script></html>
A continuación podemos escribir nuestra función de codificación.
Ideas de implementación
Dibuja la imagen que se codificará en el lienzo.
// Inicializa la imagen del dibujo toCode (currentImg) { this.$nextTick(() => { // Obtiene el nodo del elemento principal del lienzo que se va a dibujar let parentId = document.getElementById('parentId') // Inicializa la imagen let drawImg = new Image() drawImg.setAttribute('crossOrigin', 'anonymous') drawImg.crossOrigin = 'Anónimo' drawImg.src = currentImg // Crea un elemento de lienzo y agrégalo al nodo principal let addCanvas = document.createElement('canvas') parentId.appendChild(addCanvas) let canvas = parentId.lastElementChild canvas.id = 'imgCanvas' if (canvas.getContext) { let ctx = canvas.getContext('2d') // Dibuja la imagen drawImg.onload = function () { canvas.width = 720 lienzo.altura = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } })} Haga clic en el botón de codificación para dibujar el área de codificación.Idea:
// Codificación de código de diálogo (img) { let parentId = document.getElementById('parentId') let canvas = document.getElementById('imgCanvas') if (canvas.getContext) { let ctx = canvas.getContext('2d') let drawImage = nueva Imagen() drawImage.crossOrigin = 'Anónimo' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } // Haga clic con el mouse parentId.onmousedown = e => { ctx.clearRect(0, 0, canvas.width, canvas. altura) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // X cuando se hace clic con el mouse this.clickY = e.offsetY // Y cuando se hace clic con el mouse } // ParentId.onmouseup = () => { this. = false } // Ratón presionado 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 = [] // Matriz bidimensional, cada submatriz tiene 5 valores (dibuja la coordenada X, la coordenada y del esquina superior izquierda del rectángulo, el ancho y alto del rectángulo, el número aleatorio de 4 dígitos generado se usa para el valor del color) para (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)]) } para (sea 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)]) } } para (sea 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)]) } para (sea 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)]) } } // Recorre la matriz para dibujar pequeños bloques cuadrados para (sea i = 0; i < pixels.length; i++) { ctx.fillStyle = '#bf' + píxeles[i][4] ctx.fillRect(píxeles[i][0], píxeles[i][1], píxeles[i][2], píxeles[i][ 3]) } ctx.fill() ctx.closePath() } } }}ahorrar
// Guardar dialogUpload () { let canvas = document.getElementById('imgCanvas') let tempImg = canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anónimo' imgURL .src = tempImg} código fuenteCopiar al archivo html para obtener una vista previa
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible = es decir = borde> <título> Utilice lienzo para implementar la codificación de imágenes paso a paso</título> <!-- estilo elelment-ui--> <enlace rel=hoja de estilo href=https://unpkg.com/element-ui/lib/theme-chalk/index.css> <style type=text/css> .rc-code__buttons { margen: 20px } </style></head> <body> <div id=app> <div class=rc-code__buttons> <h1>Utilice canvas en el proyecto vue para implementar la función de codificación de imágenes paso a paso</h1> <el-button type=primary @click=dialogCode(data.img_url)>Codificación</el-button> <el-button type=success @click=dialogUpload()>Guardar</el-button> </div> <el-row > <el-col :span=12><h3>Haga clic en el botón de codificación para dibujar el área de codificación en la imagen; haga clic en Guardar para generar la imagen codificada</h3></el-col> <el-col; :span=12><h3>Imagen guardada</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><!-- Introducir vue --><script src=https://cdn.jsdelivr.net/npm/vue></script><!--Presentando element-ui --><script src=https://unpkg.com/element-ui/lib/index .js></script><script>new Vue({ el: '#app', datos () { return { datos: { img_url: 'https://avatars0.githubusercontent.com/u/26196557?s=460&v=4' }, flag: false, // Ya sea para dibujar un rectángulo, haga clic en X: '', // Al comenzar a dibujar un rectángulo, la x coordenada del clic del mouse clickY: '' // Al comenzar a dibujar el rectángulo, la coordenada y cuando el mouse hace clic} }, montado() { this.toCode(this.data.img_url) }, métodos: { // Inicialice los dibujos en Code (currentImg) { this.$nextTick(() => { let parentId = document.getElementById('parentId') let drawImg = new Image() drawImg.setAttribute('crossOrigin', 'anonymous') drawImg. crossOrigin = 'Anónimo' 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 lienzo.altura = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } }) }, // Codificación de código de diálogo (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 = 'Anónimo' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } parentId.onmousedown = e => { ctx.clearRect(0, 0, canvas.width, canvas .altura) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // X cuando se hace clic con el mouse this.clickY = e.offsetY // Y cuando se hace clic con el mouse } 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 = [] // Matriz bidimensional, cada submatriz tiene 5 valores (dibuja la coordenada X, la coordenada y del esquina superior izquierda del rectángulo, el ancho y alto del rectángulo, el número aleatorio de 4 dígitos generado se usa para el valor del color) para (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)]) } para (sea 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)]) } } para (sea 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)]) } para (sea y = 0; y < (e.offsetY - this.clickY) / 15; y++) { pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math. aleatorio() * 9999)]) } } for (sea i = 0; i < píxeles.longitud; i++) { ctx.fillStyle = '#bf' + píxeles[i][4] ctx.fillRect(píxeles[i][0], píxeles[i][1], píxeles[i][2], píxeles[i][3]) } ctx .fill() ctx.closePath() } } } }, // Guardar dialogUpload () { let canvas = document.getElementById('imgCanvas') let tempImg = canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anónimo' imgURL.src = tempImg } }})</script></html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.