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, virtual-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><!-- تقديم عنصر واجهة المستخدم --><script src=https://unpkg.com/element-ui/lib/index.js></script></html>
بعد ذلك يمكننا كتابة وظيفة الترميز الخاصة بنا
أفكار التنفيذ
ارسم الصورة المراد ترميزها على القماش
// تهيئة الصورة الرسومية toCode (currentImg) { this.$nextTick(() => { // احصل على عقدة العنصر الأصلي لللوحة المراد رسمها LetparentId = document.getElementById('parentId') // تهيئة الصورة دع 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) } } })} انقر فوق زر الترميز لرسم منطقة الترميزفكرة:
// ترميز الحوار كود (img) { LetparentId = document.getElementById('parentId') Let Canvas = document.getElementById('imgCanvas') if (canvas.getContext) { Let ctx = Canvas.getContext('2d') Let drawImage = new Image() 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.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 أرقام لقيمة اللون) لـ (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 (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 (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 (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 (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} كود المصدرانسخ إلى ملف html للمعاينة
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-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> <style type=text/css> .rc-code__buttons { هامش: 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><!--مقدمة لعنصر 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' }, علامة: false, // ما إذا كنت تريد رسم مستطيل ClickX: '', // عند البدء في رسم مستطيل، علامة x إحداثيات النقر بالماوس ClickY: '' // عند البدء في رسم المستطيل، يتم إحداثي y عند النقر بالماوس} }, Mounted() { 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 قماش.الارتفاع = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } } }) }, // الترميز DialogueCode (img) { LetparentId = document.getElementById('parentId') Let Canvas = document.getElementById('imgCanvas') if (canvas.getContext) { Let ctx = Canvas . getContext('2d') Let drawImage = new Image() drawImage.crossOrigin = 'مجهول' 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 = خطأ }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 أرقام لقيمة اللون) لـ (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 (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 (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 (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. عشوائي () * 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.