前些日子做了一個項目關于vue項目需要頭像裁剪上傳功能，看了一篇文章，在此基礎上做的修改完成了這個功能，與大家分享一下。原文：http://www.survivalescaperooms.com/article/135719.htm
首先下載引入cropper js，
npm install cropper js --save
在需要的頁面引入：import Cropper from "cropper js"
html的代碼如下：
<template> <div id="demo"> <!-- 遮罩層 --> <div class="container" v-show="panel"> <div> <img id="image" :src="url" </div> <button type="button" id="button" @click="commit">確定</button> <button type="button"id="cancel" @click="cancel">取消</button> </div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backgroundImage:url('+headerImage+')'"> </div> </div> <div style="margin-top:20px;text-align: left;"> <input type="file" id="change" accept="image" @change="change"> <label for="change"></label> </div> </div> </div> </template> 主要是js代碼，如下
1，data里面定好初始變量，綁定數據，imgCropperData是我定義的判斷圖片格式的。
data() { return { headerImage: "", picValue: "", cropper: "", croppable: false, panel: false, url: "", imgCropperData: { accept: "image/gif, image/jpeg, image/png, image/jpg" } }; } 2，在mounted里面初始換裁剪框
mounted() { //初始化這個裁剪框 var self = this; var image = document.getElementById("image"); this.cropper = new Cropper(image, { aspectRatio: 1, viewMode: 1, background: false, zoomable: false, ready: function() { self.croppable = true; } }); } 3.methods的方法比較多，包括創建URL路徑，input框change事件，canvas畫圖，確定提交上傳。我還加了取消事件函數，判斷上傳文件的類型和大小。
methods: { //取消上傳 cancel() { this.panel = false; var obj = document.getElementById('change') ; obj.outerHTML=obj.outerHTML; }, //創建url路徑 getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }, //input框change事件，獲取到上傳的文件 change(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; let type = files[0].type; //文件的類型，判斷是否是圖片 let size = files[0].size; //文件的大小，判斷圖片的大小 if (this.imgCropperData.accept.indexOf(type) == -1) { alert("請選擇我們支持的圖片格式！"); return false; } if (size > 5242880) { alert("請選擇5M以內的圖片！"); return false; } this.picValue = files[0]; this.url = this.getObjectURL(this.picValue); //每次替換圖片要重新得到新的url if (this.cropper) { this.cropper.replace(this.url); } this.panel = true; }, //確定提交 commit() { this.panel = false; var croppedCanvas; var roundedCanvas; if (!this.croppable) { return; } // Crop croppedCanvas = this.cropper.getCroppedCanvas(); // Round roundedCanvas = this.getRoundedCanvas(croppedCanvas); this.headerImage = roundedCanvas.toDataURL(); //上傳圖片 this.postImg(); }, //canvas畫圖 getRoundedCanvas(sourceCanvas) { var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var width = sourceCanvas.width; var height = sourceCanvas.height; canvas.width = width; canvas.height = height; context.imageSmoothingEnabled = true; context.drawImage(sourceCanvas, 0, 0, width, height); context.globalCompositeOperation = "destination-in"; context.beginPath(); context.arc( width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true ); context.fill(); return canvas; }, //提交上傳函數 postImg() { alert("上傳成功"); //這邊寫圖片的上傳 } } css樣式代碼就不貼出來了，可以到GitHub上下載https://github.com/leileibrother/cropper-js-vue-。
總結
以上所述是小編給大家介紹的cropper js基于vue的圖片裁剪上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
