Vue + Canvas 实现头像截图上传功能
生活随笔
收集整理的這篇文章主要介紹了
Vue + Canvas 实现头像截图上传功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先，我們需要兩張畫布，一個展示選取圖片的壓縮圖，一個展示截取后的圖片。
廢話不多講上代碼如下：
HTML
<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><!--<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">--><!--1.禁止縮放--><title></title><!--引入vue--><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script><!--引入css--><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="global.css"/><link rel="stylesheet" type="text/css" href="index.css" /> </head><body><div id="app" v-cloak> <div class="container"><ul class="information creater_class"><li class="infor files"><div style="width: 100%;height: 300px;border: 1px solid #ccc;" class="center"><div class="center"><canvas style="border: 1px solid #ccc;border-radius: 50%;width: 300px;height: 300px;margin: 0 auto;display: block;" ref="originalCanvas" ref="originalCanvas" @touchstart.prevent="hasImgSrc?pressDown(originalCtx,$event):false" @touchmove.prevent="mouseDown?moveMouse($event):false" @touchend.prevent="stopCut">您的瀏覽器不支持canvas，請升級最新版本</canvas><p class="img-scale theme-red center">圖片壓縮：<span v-text="Math.round(originalCanvasWidth) + ' * ' + Math.round(originalCanvasHeight)"></span></p><div v-if="hasImgSrc" class="center"><button @click="chooseSize(cutSize)" type="button" class="btn btn-danger">Min</button><button @click="reduceSize" type="button" class="btn btn-danger">-</button><button @click="plusSize" type="button" class="btn btn-danger">+</button><button @click="chooseSize(scaleSize)" type="button" class="btn btn-danger">Max</button></div><div class="bg-info text-center" style="line-height: 50px;height: 50px;">選擇圖片<input type="file" @change="chooseImg($event)"></div></div><div v-show="hasImgSrc" class="center"><canvas ref="cutCanvas">您的瀏覽器不支持canvas，請升級最新版本</canvas><p class="theme-red center">截圖長度：<span v-text="Math.round(cutSize) + ' * ' + Math.round(cutSize)"></span></p><button @click="submitImg" class="btn btn-info">上傳頭像</button></div></div></li></ul> </div></div><script src="index.js" type="text/javascript" charset="utf-8"></script></body> </html>JS
//model var data = {//圖片originalCanvas: null, // 原圖 畫布originalCtx: null, // 原圖 上下文originalImg: null, // 原圖片的對象cutCanvas: null, // 顯示裁剪后圖片的畫布cutCtx: null, // 裁圖 畫布 上下文cutImg: null, // 裁剪后 圖片的對象originalCanvasWidth: 0, // 原圖 壓縮后 寬度originalCanvasHeight: 0, // 原圖 壓縮后 高度scaleSize: 300, // 原圖壓縮的尺寸cutSize: 200, // 裁剪 正方形的寬高hasImgSrc: false, // 是否有可裁剪圖片centerX: 0, // 原圖畫布中心 X坐標centerY: 0, // 原圖畫布中心 Y坐標mouseX: 0, // 鼠標所在點 X坐標mouseY: 0, // 鼠標所在點 Y坐標differenceX: 0, // 原點X - 鼠標X點 差值differenceY: 0, // 原點Y - 鼠標Y點 差值mouseDown: false, // 鼠標是否點擊hasImgSrc: false, // 是否有可裁剪圖片imageDate: null, // 截圖 對象tempImageData: null, // 實時截圖 緩存對象imgFormat: ['jpg', 'png'] // 圖片上傳格式 } //ViewModel var app = new Vue({el: "#app",data: data,mounted () {// 初始化 原圖的畫布let originalCanvas = this.originalCanvas = this.$refs.originalCanvaslet originalCtx = this.originalCtx = originalCanvas.getContext('2d')// 初始化 裁圖 畫布let cutCanvas = this.cutCanvas = this.$refs.cutCanvasthis.cutCtx = cutCanvas.getContext('2d')// 設置畫布寬高originalCanvas.width = this.originalCanvasWidth = this.scaleSizeoriginalCanvas.height = this.originalCanvasHeight = this.scaleSizecutCanvas.width = this.cutSizecutCanvas.height = this.cutSize// 繪制默認圖片if (originalCanvas.getContext) {let originalImg = this.originalImg = new Image()originalImg.src = 'data:image/jpeg;base64,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MiYiuwPlkxw3s3+NblFCdjOrShVjyTV0eN3lncWFy1vcxmORex7+49RXslZ+raPa6xbeVcLhx9yQfeQ/57VoVTdzjwWDeGnPW6drfiFcV8Qf+Yd/21/9lrta4r4g/wDMO/7a/wDstEdysz/3WXy/NHE0UUVofJhRRRQB23w+/wCYj/2y/wDZq7WuK+H3/MR/7Zf+zV2tZy3PrMs/3WPz/NhWdoelppGlx2wwZPvSMO7Hr/h+FaNFSdjgnJSe6/UKKKKCgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK4r4g/8w7/ALa/+y12tcV8Qf8AmHf9tf8A2WqjucOZ/wC6y+X5o4miiitD5MKKKKAO2+H3/MR/7Zf+zV2tcV8Pv+Yj/wBsv/Zq7Ws5bn1mWf7rH5/mwoooqTuCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK4r4g/8w7/ALa/+y12tcV8Qf8AmHf9tf8A2WqjucOZ/wC6y+X5o4miiitD5MKKKKAO0+H7APqC55IjP/oX+NdvXlvhnVF0vWEkkOIZR5ch9Aeh/A4r1IEEZByDWctz6fKqilh1Fbr/AIcKKKKk9MKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAriPiAwL6eueQJCf/Hf8K7ckAEk4A6k15Z4m1RdV1h5IzmGMeXGfUDv+JzVR3PMzWoo4dxe7/wCHMeiiitD5gKKKKACur8PeLmsI1tL/AHPbrwkg5ZB6H1FcpRQ1c2oV50Jc8GexWuoWd6ga2uYpQf7rcj6jqKs14pRUch60c6dtYfj/AMA9rorxSijkH/bX9z8f+Ae10V4pRRyB/bX9z8f+Ae10V4pRRyB/bX9z8f8AgHtdFeKUUcgf21/c/H/gHtdFeKUUcgf21/c/H/gHtdFeKUUcgf21/c/H/gHtdFeKUUcgf21/c/H/AIB7XRXilFHIH9tf3Px/4B7XRXilFHIH9tf3Px/4B7XRXilFHIH9tf3Px/4B7XRXilFHIH9tf3Px/wCAe10V4pRRyB/bX9z8f+Ae10V4pRRyB/bX9z8f+Ae10V4pRRyB/bX9z8f+Ae10V4pRRyB/bX9z8f8AgHtdFeKUUcgf21/c/H/gHtdFeKUUcgf21/c/H/gHtdFeKUUcgf21/c/H/gHtdFeKUUcgf21/c/H/AIB7XVa61GzsULXNzFEB2ZuT9B1NeO0UcgpZ07aQ/H/gHU+IfFrahG1pYho7c8O54Zx6ewrlqKKtKx5NavOtLnmwooooMQooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//9k=';originalImg.onload = () => {originalCtx.drawImage(originalImg, originalCanvas.width / 2 - this.cutSize / 2, originalCanvas.height / 2 - this.cutSize / 2, this.cutSize, this.cutSize)}}},methods:{// 選擇圖片chooseImg:function (e) {// 選中文件擇執行if (e.target.files.length !== 0) { // 獲取文件let file = e.target.files[0]// 限定上傳格式let arr = this.imgFormatlet str = file.name.split('.').pop()if (arr.indexOf(str) !== -1) {// 轉換成Base 64位this.changeDataURL(file, (dataUrl) => {this.originalImg.src = dataUrl// 獲取圖片 寬高let width = this.originalImg.widthlet height = this.originalImg.height//在畫布沒發生變化時，清除畫布區域，重置畫布的寬高為默認的值，然后對比寬高，短的一邊給默認值（300），長的一邊等比計算：// 清除畫布this.clearCanvas()// 重置畫布的寬高let originalCanvas = this.originalCanvasoriginalCanvas.width = this.originalCanvasWidth = this.scaleSizeoriginalCanvas.height = this.originalCanvasHeight = this.scaleSize// 設置畫布壓縮后的寬高if (width > height) {originalCanvas.width = this.originalCanvasWidth = width * this.scaleSize / height} else if (width < height) {originalCanvas.height = this.originalCanvasHeight = height * this.scaleSize / width}// 設置繪圖原點this.centerX = Math.round(originalCanvas.width / 2)this.centerY = Math.round(originalCanvas.height / 2)// 圖片加載完成 繪制選中的圖片this.originalImg.onload = () => {// 允許鼠標點擊事件this.hasImgSrc = true// 繪制圖片this.drawOriginal(this.originalImg, originalCanvas.width, originalCanvas.height)}})} else {alert('圖片格式錯誤')}}},// 轉換成dataUrlchangeDataURL:function (fileObj, callback) {let file = new FileReader()file.readAsDataURL(fileObj)file.onload = (e) => { callback(e.target.result) } },// 清除畫布clearCanvas:function () {// 繪制原圖片this.originalCtx.clearRect(0, 0, this.originalCanvasWidth, this.originalCanvasHeight)},// 繪制 壓縮后的圖片drawOriginal:function (img, width, height) {// 繪制 原圖this.originalCtx.drawImage(img, 0, 0, width, height)// 緩存 截圖對象this.imageData = this.originalCtx.getImageData(this.centerX - this.cutSize / 2, this.centerY - this.cutSize / 2, this.cutSize, this.cutSize)// 清除截圖區域時使用this.tempImageData = this.originalCtx.getImageData(this.centerX - this.cutSize / 2 - 1, this.centerY - this.cutSize / 2 - 1, this.cutSize + 2, this.cutSize + 2)// 繪制 截圖框this.drawCuttingFrame(this.originalCtx, this.centerX, this.centerY, this.cutSize / 2, 20)// 繪制 裁剪圖片this.drawCutImage(this.imageData)},drawCuttingFrame:function (ctx, x, y, l, d) {ctx.beginPath()// 右上框ctx.moveTo(x - 1, y - l)ctx.lineTo(x + 1, y - l)ctx.moveTo(x + d, y - l)ctx.lineTo(x + l, y - l)ctx.lineTo(x + l, y - d)// 右下框ctx.moveTo(x + l, y - 1)ctx.lineTo(x + l, y + 1)ctx.moveTo(x + l, y + d)ctx.lineTo(x + l, y + l)ctx.lineTo(x + d, y + l)// 左下框ctx.moveTo(x - 1, y + l)ctx.lineTo(x + 1, y + l)ctx.moveTo(x - d, y + l)ctx.lineTo(x - l, y + l)ctx.lineTo(x - l, y + d)// 左上框ctx.moveTo(x - l, y - 1)ctx.lineTo(x - l, y + 1)ctx.moveTo(x - l, y - d)ctx.lineTo(x - l, y - l)ctx.lineTo(x - d, y - l)ctx.strokeStyle = 'green'ctx.stroke()ctx.closePath()},// 繪制 裁剪后的圖片drawCutImage:function (imageData) {this.cutCtx.putImageData(imageData, 0, 0)},// 鼠標點擊事件pressDown:function (ctx,e) { // pc:@mousedown.prevent="hasImgSrc ? pressDown(originalCtx, $event) : false" @mousemove="mouseDown ? moveMouse($event) : false" @mouseup="stopCut" // pc:this.mouseX = e.offsetX // this.mouseY = e.offsetYconsole.log(e.touches[0].clientX +'...'+e.touches[0].clientY)// 鼠標 坐標 // this.mouseX = e.touches[0].clientX // this.mouseY = e.touches[0].clientYthis.mouseX = e.touches[0].clientXthis.mouseY = e.touches[0].clientY// 原點到鼠標之間的差值this.differenceX = this.centerX - this.mouseXthis.differenceY = this.centerY - this.mouseY// 截圖框內才能拖動if (Math.abs(this.differenceX) <= this.cutSize / 2 && Math.abs(this.differenceY) <= this.cutSize / 2) {// 允許鼠標移動事件this.mouseDown = true}},// 鼠標移動事件moveMouse:function (e) {if (this.mouseDown) {// 清空 上個路徑的截圖框 X、Y坐標 - 1 寬高 + 2 徹底清除整個截圖框區域this.originalCtx.clearRect(this.centerX - this.cutSize / 2 - 1, this.centerY - this.cutSize / 2 - 1, this.cutSize + 2, this.cutSize + 2)this.originalCtx.putImageData(this.tempImageData, this.centerX - this.cutSize / 2 - 1, this.centerY - this.cutSize / 2 - 1)// 重新賦值 截圖框原點位置if (e.touches[0].clientX > this.cutSize / 2 - this.differenceX && e.touches[0].clientX + this.cutSize / 2 + this.differenceX < this.originalCanvas.width) {// 可移動范圍內賦值this.centerX = e.touches[0].clientX + this.differenceX} else {// 不可移動范圍內賦值this.centerX = e.touches[0].clientX <= this.cutSize / 2 - this.differenceX ? this.cutSize / 2 : this.originalCanvas.width - this.cutSize / 2}if (e.touches[0].clientY > this.cutSize / 2 - this.differenceY && e.touches[0].clientY + this.cutSize / 2 + this.differenceY < this.originalCanvas.height) {this.centerY = e.touches[0].clientY + this.differenceY} else {this.centerY = e.touches[0].clientY <= this.cutSize / 2 - this.differenceY ? this.cutSize / 2 : this.originalCanvas.height - this.cutSize / 2}// 緩存 截圖對象this.imageData = this.originalCtx.getImageData(this.centerX - this.cutSize / 2, this.centerY - this.cutSize / 2, this.cutSize, this.cutSize)// 緩存 清除截圖框的 繪圖模塊this.tempImageData = this.originalCtx.getImageData(this.centerX - this.cutSize / 2 - 1, this.centerY - this.cutSize / 2 - 1, this.cutSize + 2, this.cutSize + 2)// 重繪截圖框this.drawCuttingFrame(this.originalCtx, this.centerX, this.centerY, this.cutSize / 2, 20)// 繪制 裁剪圖片this.drawCutImage(this.imageData);//阻止頁面的滑動默認事件 // document.addEventListener("touchmove",function(){ // event.preventDefault(); // },false);}},// 松開鼠標點擊stopCut:function () {// 停止鼠標拖動事件this.mouseDown = false},// 尺寸減1 重繪reduceSize:function () {// 不能小于裁剪大小if (this.originalCanvasWidth > this.cutSize && this.originalCanvasHeight > this.cutSize) {// 清除畫布this.clearCanvas()// 固定短邊，計算長邊的值if (this.originalCanvasWidth > this.originalCanvasHeight) {this.originalCanvas.height = this.originalCanvasHeight -= 1this.originalCanvas.width = this.originalCanvasWidth = this.originalCanvasHeight / (this.originalCanvasHeight + 1) * this.originalCanvasWidth} else if (this.originalCanvasWidth < this.originalCanvasHeight) {this.originalCanvas.width = this.originalCanvasWidth -= 1this.originalCanvas.height = this.originalCanvasHeight = this.originalCanvasWidth / (this.originalCanvasWidth + 1) * this.originalCanvasHeight} else {this.originalCanvas.width = this.originalCanvasWidth -= 1this.originalCanvas.height = this.originalCanvasHeight -= 1}// 設置繪圖原點this.centerX = Math.round(this.originalCanvas.width / 2)this.centerY = Math.round(this.originalCanvas.height / 2)// 繪制 原圖 截圖框this.drawOriginal(this.originalImg, this.originalCanvasWidth, this.originalCanvasHeight)}},// 尺寸加1 重繪plusSize:function () {if (!(this.originalCanvasWidth >= 300 && this.originalCanvasHeight >= 300)) {// 清除畫布this.clearCanvas()// 計算長邊的值if (this.originalCanvasWidth > this.originalCanvasHeight) {this.originalCanvas.height = this.originalCanvasHeight += 1this.originalCanvas.width = this.originalCanvasWidth = this.originalCanvasHeight / (this.originalCanvasHeight - 1) * this.originalCanvasWidth} else if (this.originalCanvasWidth < this.originalCanvasHeight) {this.originalCanvas.width = this.originalCanvasWidth += 1this.originalCanvas.height = this.originalCanvasHeight = this.originalCanvasWidth / (this.originalCanvasWidth - 1) * this.originalCanvasHeight} else {this.originalCanvas.width = this.originalCanvasWidth += 1this.originalCanvas.height = this.originalCanvasHeight += 1}// 設置繪圖原點this.centerX = Math.round(this.originalCanvas.width / 2)this.centerY = Math.round(this.originalCanvas.height / 2)// 繪制 原圖 截圖框this.drawOriginal(this.originalImg, this.originalCanvasWidth, this.originalCanvasHeight)}},// 選擇最大 最小 縮放比例 重繪chooseSize:function (size) {// 清除畫布this.clearCanvas()// 計算長邊的值let width = this.originalCanvasWidthlet height = this.originalCanvasHeightlet originalCanvas = this.originalCanvasif (width > height) {originalCanvas.width = this.originalCanvasWidth = size / height * widthoriginalCanvas.height = this.originalCanvasHeight = size} else if (width < height) {originalCanvas.height = this.originalCanvasHeight = size / width * heightoriginalCanvas.width = this.originalCanvasWidth = size} else {originalCanvas.width = this.originalCanvasWidth = sizeoriginalCanvas.height = this.originalCanvasHeight = size}// 設置繪圖原點，最好取整，有奇怪的bugthis.centerX = Math.round(originalCanvas.width / 2)this.centerY = Math.round(originalCanvas.height / 2)// 繪制 原圖 截圖框this.drawOriginal(this.originalImg, originalCanvas.width, originalCanvas.height)},// 上傳頭像submitImg:function () {// 生成截圖let dataUrl = this.cutCanvas.toDataURL('image/png');console.log(dataUrl)}} });完整代碼：https://download.csdn.net/download/qq_42396791/10731191
總結
以上是生活随笔為你收集整理的Vue + Canvas 实现头像截图上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 现代计算机应用特点,现代计算机的特点和计
- 下一篇： vue跳转页面增加等待_vue跳转页面方