https://github.com/MY729/front-common-funtion/blob/master/picture-code-demo/README.md
Предварительный адресhttps://my729.github.io/front-common-funtion/picture-code-demo/picture-code.html
Подготовкадемо на основе vue + element-ui
Сначала создайте html-файл и добавьте vue и element-ui (обратите внимание, что есть также файлы стилей).
<!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><!--Представляем vue --><script src=https: //cdn.jsdelivr.net/npm/vue></script><!-- Представляем element-ui --><script src=https://unpkg.com/element-ui/lib/index.js></script></html>
Далее мы можем написать нашу функцию кодирования
Идеи реализации
Нарисуйте изображение, которое нужно закодировать, на холсте.
// Инициализируем рисуемое изображение toCode (currentImg) { this.$nextTick(() => { // Получаем узел родительского элемента рисуемого холста letparentId = 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) } } })} Нажмите кнопку кодирования, чтобы нарисовать область кодирования.Идея:
// Кодирование диалогаCode (img) { letparentId = document.getElementById('parentId') let Canvas = document.getElementById('imgCanvas') if (canvas.getContext) { let ctx = Canvas.getContext('2d') let drawImage = новое изображение() drawImage.crossOrigin = 'Анонимный' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } // Щелчок мышью ParentId.onmousedown = e => { ctx.clearRect(0, 0, Canvas.width, Canvas. высота) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // X при нажатии мыши this.clickY = e.offsetY // Y при нажатии мыши } // ParentId.onmouseup = () => { this. = false } // Нажата мышь. ctx.drawImage(drawImage, 0, 0, 720, 500) ctx.beginPath() let Pixels = [] // Двумерный массив, каждый подмассив имеет 5 значений (рисуем координату X, координату y верхний левый угол прямоугольника, ширина и высота прямоугольника, сгенерированное 4-значное случайное число используется для значения цвета) 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 (пусть 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 (пусть 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)]) } } // Обходим массив и рисуем маленькие квадратные блоки для (let i = 0; i < пикселей.длина; i++) { ctx.fillStyle = '#bf' + пикселей[i][4] ctx.fillRect(pixels[i][0], пикселей[i][1], пикселей[i][2], пикселей[i][ 3]) } ctx.fill() ctx.closePath() } } }}сохранять
// Сохранить диалогUpload () { let Canvas = document.getElementById('imgCanvas') let tempImg = Canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonymous' imgURL .src = tempImg} Исходный кодСкопируйте в html-файл для предварительного просмотра
<!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>Используйте холст для пошаговой реализации функции кодирования изображений</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>Используйте холст в проекте vue для пошаговой реализации функции кодирования изображений</h1> <el-button type=primary @click=dialogCode(data.img_url)>Кодирование</el-button> <el-button type=success @click=dialogUpload()>Сохранить</el-button> </div> <el-row > <el-col :span=12><h3>Нажмите кнопку кодирования, чтобы нарисовать область кодирования на изображении; нажмите «Сохранить», чтобы создать закодированное изображение</h3></el-col> <el-col :span=12><h3>Сохраненное изображение</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 --><script src=https://cdn.jsdelivr.net/npm/vue></script><!--Представляем 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, // Рисовать ли прямоугольник clickX: '', // При начале рисования прямоугольника x координата щелчка мыши clickY: '' // При начале рисования прямоугольника координата y при щелчке мыши} }, mount() { this.toCode(this.data.img_url) }, методы: { // Инициализируйте рисование изображений toCode (currentImg) { this.$nextTick(() => { letparentId = document.getElementById('parentId') let drawImg = new Image() drawImg.setAttribute('crossOrigin', 'anonymous') drawImg. crossOrigin = 'Анонимный' 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) } } }) }, // Кодирование диалогаCode (img) { letparentId = 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, холст .height) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // X при щелчке мышью this.clickY = e.offsetY // Y при щелчке мышью } 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 = [] // Двумерный массив, каждый подмассив имеет 5 значений (рисуем координату X, координату y верхний левый угол прямоугольника, ширина и высота прямоугольника, сгенерированное 4-значное случайное число используется для значения цвета) 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 (пусть 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 (пусть y = 0; y < (e.offsetY - this.clickY) / 15; y++) { Pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math. rand() * 9999)]) } } for (let i = 0; i <pixels.length; i++) { ctx.fillStyle = '#bf' + пикселей[i][4] ctx.fillRect(пиксели[i][0], пиксели[i][1], пиксели[i][2], пиксели[i][3]) } ctx .fill() ctx.closePath() } } } }, // Сохранить диалогUpload () { let Canvas = document.getElementById('imgCanvas') let tempImg = Canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Анонимный' imgURL.src = tempImg } }})</script></html>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.