溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前些日子做了一個項目關于vue項目需要頭像裁剪上傳功能，看了一篇文章，在此基礎上做的修改完成了這個功能，與大家分享一下。原文：https://www.jb51.net/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" alt="Picture"> </div> <button type="button" id="button" @click="commit">確定</button> <button type="button"id="cancel" @click="cancel">取消</button> </div> <div > <div class="show"> <div class="picture" :> </div> </div> <div > <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的圖片裁剪上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
