https://github.com/MY729/front-common-funtion/blob/master/picture-code-demo/README.md
Visualizar endereçohttps://my729.github.io/front-common-funtion/picture-code-demo/picture-code.html
Preparaçãodemonstração baseada em vue + element-ui
Primeiro crie um arquivo html e introduza vue e element-ui (observe que também existem arquivos de estilo)
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Documento</title> <!-- elelment-ui style--> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css></head><body> </body><!-- Introduzir vue --><script src=https: //cdn.jsdelivr.net/npm/vue></script><!-- Introduzir element-ui --><script src=https://unpkg.com/element-ui/lib/index.js></script></html>
A seguir podemos escrever nossa função de codificação
Ideias de implementação
Desenhe a imagem a ser codificada na tela
// Inicializa a imagem de desenho toCode (currentImg) { this.$nextTick(() => { // Obtém o nó do elemento pai da tela a ser desenhada let parentId = document.getElementById('parentId') // Inicializa a imagem deixe drawImg = new Image() drawImg.setAttribute('crossOrigin', 'anonymous') drawImg.crossOrigin = 'Anônimo' drawImg.src = currentImg // Cria um elemento canvas e adiciona-o ao nó pai let addCanvas = document.createElement('canvas') parentId.appendChild(addCanvas) let canvas = parentId.lastElementChild canvas.id = 'imgCanvas' if (canvas.getContext) { let ctx = canvas.getContext('2d') // Desenha a imagem drawImg.onload = function () { canvas.width = 720 canvas.height = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } })} Clique no botão de codificação para desenhar a área de codificaçãoIdeia:
// Codificação dialogCode (img) { let parentId = document.getElementById('parentId') let canvas = document.getElementById('imgCanvas') if (canvas.getContext) { let ctx = canvas.getContext('2d') let drawImage = nova imagem() drawImage.crossOrigin = 'Anônimo' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } // Clique do 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 quando o mouse é clicado this.clickY = e.offsetY // Y quando o mouse é clicado } // ParentId.onmouseup = () => { flag this. = false } // Mouse pressionado 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 tem 5 valores (desenhe a coordenada X, coordenada y do canto superior esquerdo do retângulo, o retângulo A largura e altura, o número aleatório de 4 dígitos gerado é usado para o valor da cor) for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) { for (deixe 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 (seja 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 (deixe x = 0; x > (e.offsetX - this.clickX) / 15; x--) { for (deixe 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 (seja 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)]) } } // Percorra o array para desenhar pequenos blocos quadrados 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() } } }}salvar
// Salvar dialogUpload () { let canvas = document.getElementById('imgCanvas') let tempImg = canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonymous' imgURL .src = tempImg} Código fonteCopie para o arquivo html para visualização
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Use o canvas para implementar a codificação de imagem passo a passo</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 {margem: 20px } </style></head> <body> <div id=app> <div class=rc-code__buttons> <h1>Use canvas no projeto vue para implementar a função de codificação de imagem passo a passo</h1> <el-button type=primary @click=dialogCode(data.img_url)>Codificação</el-button> <el-button type=success @click=dialogUpload()>Salvar</el-button> </div> <el-row > <el-col :span=12><h3>Clique no botão de codificação para desenhar a área de codificação na imagem; clique em Salvar para gerar a imagem codificada</h3></el-col> <el-col :span=12><h3>Imagem salva</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><!-- Introduzir vue --><script src=https://cdn.jsdelivr.net/npm/vue></script><!--Introduzindo 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, // Se deseja desenhar um retângulo clickX: '', // Ao começar a desenhar um retângulo, o x coordenada do clique do mouse clickY: '' // Ao começar a desenhar o retângulo, a coordenada y quando o mouse clica} }, Mounted() { this.toCode(this.data.img_url) }, methods: { // Inicialize as imagens de desenho toCode (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 canvas.height = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } }) }, // Codificação 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 = 'Anônimo' 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 quando o mouse é clicado this.clickY = e.offsetY // Y quando o mouse é clicado } parentId.onmouseup = () => { this.flag = falso } 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 tem 5 valores (desenhe a coordenada X, coordenada y do canto superior esquerdo do retângulo, o retângulo A largura e altura, o número aleatório de 4 dígitos gerado é usado para o valor da cor) for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) { for (deixe 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 (seja 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 (deixe x = 0; x > (e.offsetX - this.clickX) / 15; x--) { for (deixe 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 (seja 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 (deixe 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() } } } }, // Salvar dialogUpload () { let canvas = document.getElementById('imgCanvas') deixe tempImg = canvas.toDataURL('image/png') deixe imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anônimo' imgURL.src = tempImg } }})</script></html>O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.