使用canvas一步步實現圖片打碼功能的方法

作者：Eve Cole 更新時間：2025-03-11 23:32:01

原文地址

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畫布，並將要打碼的圖片繪製上去
監聽滑鼠在圖片上的點擊，移動、放開事件，在canvas畫布上繪製要打碼的區域
處理繪製的打碼區域
儲存打碼後的圖片

將要打碼的圖片繪製到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 = 'imgvas) let canvas = parentId.lastElementChild canvas.id = 'imgvasvas.id = 'imgvasvas' (canvas.getContext) { let ctx = canvas.getContext('2d') // 繪製圖片drawImg.onload = function () { canvas.width = 720 canvas.height = 500 ctx.drawImage(drawImg, 0, 0, 720, 500) } }}}

點選打碼按鈕，繪製打碼區域

思路：

滑鼠點擊，取得點擊時的座標，每次點擊前可能會存在打過碼的區域，先清除畫布，重新繪製圖片
滑鼠移動，開始繪製打碼的矩形，透過移動的座標和上面點擊的點座標確定繪製的矩形座標和寬高
將繪製的打碼矩形，分割成一個寬高15像素的小正方形，並給每個小正方形生產隨機顏色
滑鼠鬆開，停止繪製矩形

 // 打碼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, 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, 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.Originrig .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 = document.lastElementChild canvas.id = 'imgCan.' 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. ' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } parentId.onmousedown = e => { ctx.clearRect(0, 0, canvas.width, canvasx. 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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。