溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
使用canvas怎么實(shí)現(xiàn)一個(gè)圖片打碼功能？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
首先創(chuàng)建一個(gè)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>
接下來就可以寫我們的打碼功能啦
實(shí)現(xiàn)思路
創(chuàng)建canvas畫布，并將要打碼的圖片繪制上去
監(jiān)聽鼠標(biāo)在圖片上的點(diǎn)擊，移動(dòng)、松開事件，在canvas畫布上繪制要打碼的區(qū)域
處理繪制的打碼區(qū)域
保存打碼后的圖片
將要打碼的圖片繪制到canvas畫布上
// 初始化 繪制圖片
toCode (currentImg) {
this.$nextTick(() => {
// 獲取將要繪制的canvas的父元素節(jié)點(diǎn)
let parentId = document.getElementById('parentId')
// 初始化圖片
let drawImg = new Image()
drawImg.setAttribute('crossOrigin', 'anonymous')
drawImg.crossOrigin = 'Anonymous'
drawImg.src = currentImg
// 創(chuàng)建canvas元素并添加到父節(jié)點(diǎn)中
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)
}
}
})
}點(diǎn)擊打碼按鈕，繪制打碼區(qū)域
思路：
鼠標(biāo)點(diǎn)擊，獲取點(diǎn)擊時(shí)的坐標(biāo)，每次點(diǎn)擊前可能會(huì)存在打過碼的區(qū)域，先清除畫布，重新繪制圖片
鼠標(biāo)移動(dòng)，開始繪制打碼的矩形，通過移動(dòng)的坐標(biāo)和上面點(diǎn)擊的點(diǎn)坐標(biāo)確定繪制的矩形坐標(biāo)和寬高
將繪制的打碼矩形，分割成一個(gè)個(gè)寬高15像素的小正方形，并給每個(gè)小正方形生產(chǎn)隨機(jī)顏色
鼠標(biāo)松開，停止繪制矩形
// 打碼
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)
}
// 鼠標(biāo)點(diǎn)擊
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 // 鼠標(biāo)點(diǎn)擊時(shí)的X
this.clickY = e.offsetY // 鼠標(biāo)點(diǎn)擊時(shí)的Y
}
// 鼠標(biāo)松開
parentId.onmouseup = () => {
this.flag = false
}
// 鼠標(biāo)按下
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 = [] // 二維數(shù)組，每個(gè)子數(shù)組有5個(gè)值（繪制矩形左上角的X坐標(biāo)、y坐標(biāo)，矩形的寬、高，生成的4位隨機(jī)數(shù)用于顏色值）
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)])
}
}
// 遍歷數(shù)組繪制小正方形塊
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
}源碼
復(fù)制到html文件可預(yù)覽
<!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一步步實(shí)現(xiàn)圖片打碼功能</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">
<h2>vue項(xiàng)目中使用canvas一步步實(shí)現(xiàn)圖片打碼功能</h2>
<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"><h4>點(diǎn)擊打碼按鈕，在圖片上繪制打碼區(qū)域； 點(diǎn)擊保存，生成打碼后的圖片</h4></el-col>
<el-col :span="12"><h4>保存后的圖片</h4></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: '', // 開始繪制矩形時(shí)，鼠標(biāo)點(diǎn)擊時(shí)的x坐標(biāo)
clickY: '' // 開始繪制矩形時(shí)，鼠標(biāo)點(diǎn)擊時(shí)的y坐標(biāo)
}
},
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 // 鼠標(biāo)點(diǎn)擊時(shí)的X
this.clickY = e.offsetY // 鼠標(biāo)點(diǎn)擊時(shí)的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 = [] // 二維數(shù)組，每個(gè)子數(shù)組有5個(gè)值（繪制矩形左上角的X坐標(biāo)、y坐標(biāo)，矩形的寬、高，生成的4位隨機(jī)數(shù)用于顏色值）
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>看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼