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 + elelment-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 - เนื้อหาที่เข้ากันได้=ie=edge> <title>เอกสาร</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(() => { // รับโหนดองค์ประกอบหลักของผืนผ้าใบที่จะวาด ให้ parentId = document.getElementById('parentId') // เตรียมข้อมูลเบื้องต้นให้กับรูปภาพ ให้ DrawImg = รูปภาพใหม่ () DrawImg.setAttribute('crossOrigin', 'anonymous') DrawImg.crossOrigin = 'Anonymous' DrawImg.src = currentImg // สร้างองค์ประกอบ canvas และเพิ่มลงในโหนดพาเรนต์ ให้ addCanvas = document.createElement('canvas') parentId.appendChild(addCanvas) ให้ canvas = parentId.lastElementChild canvas.id = 'imgCanvas' if (canvas.getContext) { la ctx = canvas.getContext('2d') // วาดภาพ DrawImg.onload = function () { canvas.width = 720 canvas.height = 500 ctx.drawImage (drawImg, 0, 0, 720, 500) } } })} คลิกปุ่มเขียนโค้ดเพื่อวาดพื้นที่เขียนโค้ดความคิด:
// การเข้ารหัส dialCode (img) { la parentId = document.getElementById('parentId') la canvas = document.getElementById('imgCanvas') if (canvas.getContext) { la ctx = canvas.getContext('2d') ให้ 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 } // เมาส์กด parentId.onmousemove = e => { if (this.flag) { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(drawImage, 0, 0, 720, 500) ctx.beginPath() ให้พิกเซล = [] // อาร์เรย์สองมิติ แต่ละอาร์เรย์ย่อยมี 5 ค่า (วาดพิกัด X, พิกัด y ของ มุมซ้ายบนของสี่เหลี่ยม, สี่เหลี่ยม ความกว้างและความสูง, ตัวเลขสุ่ม 4 หลักที่สร้างขึ้นใช้สำหรับค่าสี) สำหรับ (ให้ x = 0; x < (e.offsetX - this.clickX) / 15; x++) { สำหรับ (ให้ 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)]) } สำหรับ (ให้ 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)]) } } สำหรับ (ให้ x = 0; x > (e.offsetX - this.clickX) / 15; x--) { สำหรับ (ให้ 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)]) } สำหรับ (ให้ 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)]) } } // สำรวจอาร์เรย์และวาดบล็อกสี่เหลี่ยมเล็กๆ สำหรับ (ให้ i = 0; i <pixel.length; i++) { ctx.fillStyle = '#bf' + พิกเซล[i][4] ctx.fillRect(pixels[i][0], พิกเซล[i][1], พิกเซล[i][2], พิกเซล[i][ 3]) } ctx.fill() ctx.closePath() } } }}บันทึก
// บันทึก DialogUpload () { la canvas = document.getElementById('imgCanvas') ให้ tempImg = canvas.toDataURL('image/png') ให้ 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>ใช้ Canvas เพื่อใช้ฟังก์ชันการเขียนโค้ดรูปภาพทีละขั้นตอน</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 { ระยะขอบ: 20px } </style></head> <body> <div id=app> <div class=rc-code__buttons> <h1>ใช้ canvas ใน vue project เพื่อใช้ฟังก์ชันการเข้ารหัสรูปภาพทีละขั้นตอน</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) }, วิธีการ: { // เริ่มต้นการวาดภาพเป็นรหัส (currentImg) { this.$nextTick(() => { la parentId = document.getElementById('parentId') la DrawImg = new Image() DrawImg.setAttribute('crossOrigin', 'anonymous') DrawImg. crossOrigin = 'ไม่ระบุชื่อ' DrawImg.src = currentImg ให้ addCanvas = document.createElement('canvas') parentId.appendChild(addCanvas) ให้ canvas = parentId.lastElementChild canvas.id = 'imgCanvas' if (canvas.getContext) { ให้ ctx = canvas.getContext('2d') DrawImg.onload = function () { canvas.width = 720 canvas.height = 500 ctx.drawImage (drawImg, 0, 0, 720, 500) } } }) }, // การเข้ารหัสไดอะล็อกโค้ด (img) { la parentId = document.getElementById('parentId') la canvas = document.getElementById('imgCanvas') if (canvas.getContext) { la ctx = canvas getContext('2d') ให้ 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 .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() ให้พิกเซล = [] // อาร์เรย์สองมิติ แต่ละอาร์เรย์ย่อยมี 5 ค่า (วาดพิกัด X, พิกัด y ของ มุมซ้ายบนของสี่เหลี่ยม, สี่เหลี่ยม ความกว้างและความสูง, ตัวเลขสุ่ม 4 หลักที่สร้างขึ้นใช้สำหรับค่าสี) สำหรับ (ให้ x = 0; x < (e.offsetX - this.clickX) / 15; x++) { สำหรับ (ให้ 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)]) } สำหรับ (ให้ 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)]) } } สำหรับ (ให้ x = 0; x > (e.offsetX - this.clickX) / 15; x--) { สำหรับ (ให้ 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)]) } สำหรับ (ให้ y = 0; y < (e.offsetY - this.clickY) / 15; y++) {pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math. สุ่ม() * 9999)]) } } สำหรับ (ให้ i = 0; i <pixel.length; i++) { ctx.fillStyle = '#bf' + พิกเซล[i][4] ctx.fillRect(พิกเซล[i][0], พิกเซล[i][1], พิกเซล[i][2], พิกเซล[i][3]) } ctx .fill() ctx.closePath() } } } }, // บันทึก DialogUpload () { la canvas = document.getElementById('imgCanvas') ให้ tempImg = canvas.toDataURL('image/png') ให้ imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'ไม่ระบุชื่อ' imgURL.src = tempImg } }})</script></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network