原文地址
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
準備工作
demo 基于 vue + elelment-ui
首先創建一個html文件, 并引入 vue 和 elelment-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樣式 --> <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>
接下來就可以寫我們的打碼功能啦
實現思路
將要打碼的圖片繪制到canvas畫布上
// 初始化 繪制圖片toCode (currentImg) { this.$nextTick(() => { // 獲取將要繪制的canvas的父元素節點 let parentId = document.getElementById('parentId') // 初始化圖片 let drawImg = new Image() drawImg.setAttribute('crossOrigin', 'anonymous') drawImg.crossOrigin = 'Anonymous' drawImg.src = currentImg // 創建canvas元素并添加到父節點中 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) } } })}點擊打碼按鈕，繪制打碼區域
思路：
// 打碼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 = 'Anonymous' 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() 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 (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' + pixels[i][4] ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3]) } ctx.fill() ctx.closePath() } } }}保存
// 保存dialogUpload () { 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>使用canvas一步步實現圖片打碼功能</title> <!-- elelment-ui樣式 --> <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項目中使用canvas一步步實現圖片打碼功能</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坐標 } }, mounted() { this.toCode(this.data.img_url) }, methods: { // 初始化 繪制圖片 toCode (currentImg) { this.$nextTick(() => { let parentId = 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) } } }) }, // 打碼 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 = 'Anonymous' 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() 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 (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' + pixels[i][4] ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3]) } ctx.fill() ctx.closePath() } } } }, // 保存 dialogUpload () { let canvas = document.getElementById('imgCanvas') let tempImg = canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonymous' imgURL.src = tempImg } }})</script></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
