cropper js基於vue的圖片裁剪上傳功能的實現代碼，croppervue

cropper js基於vue的圖片裁剪上傳功能的實現代碼，croppervue

前些日子做了一個項目關於vue項目需要頭像裁剪上傳功能，看了一篇文章，在此基礎上做的修改完成了這個功能，與大家分享一下。原文：http://www.bkjia.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" 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裡面定好初始變數，綁定資料，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的圖片裁剪上傳功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！