快捷導(dǎo)航

cropper js基于vue的圖片裁剪上傳功能的實(shí)現(xiàn)代碼

更新時(shí)間：2018年03月01日 11:14:33 作者：小雷雷哥哥

這篇文章主要介紹了cropper js基于vue的圖片裁剪上傳功能的相關(guān)資料,需要的朋友可以參考下

前些日子做了一個(gè)項(xiàng)目關(guān)于vue項(xiàng)目需要頭像裁剪上傳功能，看了一篇文章，在此基礎(chǔ)上做的修改完成了這個(gè)功能，與大家分享一下。原文：http://www.dbjr.com.cn/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 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里面定好初始變量，綁定數(shù)據(jù)，imgCropperData是我定義的判斷圖片格式的。

data() { 
 return { 
 headerImage: "", 
 picValue: "", 
 cropper: "", 
 croppable: false, 
 panel: false, 
 url: "", 
 imgCropperData: { 
 accept: "image/gif, image/jpeg, image/png, image/jpg" 
 } 
 }; 
 }

2，在mounted里面初始換裁剪框

mounted() { 
 //初始化這個(gè)裁剪框 
 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的方法比較多，包括創(chuàng)建URL路徑，input框change事件，canvas畫圖，確定提交上傳。我還加了取消事件函數(shù)，判斷上傳文件的類型和大小。

methods: { 
 //取消上傳 
 cancel() { 
 this.panel = false; 
 var obj = document.getElementById('change') ; 
 obj.outerHTML=obj.outerHTML; 
 }, 
 //創(chuàng)建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以內(nèi)的圖片！"); 
 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; 
 }, 
 //提交上傳函數(shù) 
 postImg() { 
 alert("上傳成功"); 
 //這邊寫圖片的上傳 
 } 
 }

css樣式代碼就不貼出來了，可以到GitHub上下載https://github.com/leileibrother/cropper-js-vue-。

總結(jié)

以上所述是小編給大家介紹的cropper js基于vue的圖片裁剪上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: