基于cropper.js封裝vue實現(xiàn)在線圖片裁剪組件功能

更新時間：2018年03月01日 14:13:51 作者：2B_LIS

這篇文章主要介紹了基于cropper.js封裝vue實現(xiàn)在線圖片裁剪組件功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

效果圖如下所示，

github:demo下載

cropper.js

github:cropper.js

官網(wǎng)（demo）

cropper.js 安裝

npm或bower安裝

npm install cropper
# or
bower install cropper

clone下載：下載地址

git clone https://github.com/fengyuanchen/cropper.git

引用cropper.js

主要引用cropper.js跟cropper.css兩個文件

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/cropper.css" rel="external nofollow" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

注意：必須先引入jquery文件，才能使用cropper.js插件

簡單使用

構建截圖所要用到的div容器

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
 ![](picture.jpg)
</div>

添加容器的樣式，讓img填充滿整個容器（很重要）

/* Limit image width to avoid overflow the container */
img {
 max-width: 100%; /* This rule is very important, please do not ignore this! */
}

調用cropper.js方法，初始化截圖控件

$('#image').cropper({
 aspectRatio: 16 / 9,
 crop: function(e) {
 // Output the result data for cropping image.
 console.log(e.x);
 console.log(e.y);
 console.log(e.width);
 console.log(e.height);
 console.log(e.rotate);
 console.log(e.scaleX);
 console.log(e.scaleY);
 }
});

其他詳細api請參考：github:cropper.js

封裝成vue組件

封裝成vue組件中需解決的問題

cropper.js相關

模擬input框點擊選擇圖片并對選擇的圖片進行格式、大小限制

重新選擇圖片裁剪

確認裁剪并獲取base64格式的圖片信息

vue相關

非父子組件之間的通信問題

模擬input框點擊選擇圖片并對選擇的圖片進行格式、大小限制

構建一個隱藏的input標簽，然后模擬點擊此input，從而達到能選擇圖片的功能

<!-- input框 -->
<input id="myCropper-input" type="file" :accept="imgCropperData.accept" ref="inputer" @change="handleFile">
//模擬點擊
document.getElementById('myCropper-input').click();

給input綁定一個監(jiān)聽內容變化的方法，拿到上傳的文件，并進行格式、大小校驗

// imgCropperData: {
// accept: 'image/gif, image/jpeg, image/png, image/bmp',
// }
handleFile (e) {
 let _this = this;
 let inputDOM = this.$refs.inputer;
 // 通過DOM取文件數(shù)據(jù)
 _this.file = inputDOM.files[0];
 // 判斷文件格式
 if (_this.imgCropperData.accept.indexOf(_this.file.type) == -1) {
 _this.$Modal.error({
  title: '格式錯誤',
  content: '您選擇的圖片格式不正確！'
 });
 return;
 }
 // 判斷文件大小限制
 if (_this.file.size > 5242880) {
 _this.$Modal.error({
  title: '超出限制',
  content: '您選擇的圖片過大，請選擇5MB以內的圖片！'
 });
 return;
 }
 var reader = new FileReader();
 // 將圖片將轉成 base64 格式
 reader.readAsDataURL(_this.file);
 reader.onload = function () {
 _this.imgCropperData.imgSrc = this.result;
 _this.initCropper();
 }
}

重新選擇圖片裁剪

當?shù)谝淮芜x擇圖片之后，肯定會面臨需要重選圖片的問題，那么就會面臨如何替換掉裁剪框中的圖片，上面的步驟選擇了圖片后通過FileRender()方法拿到了圖片的主要信息，現(xiàn)在就需要重新構建裁剪框就可以解決問題了，查看cropper.js給出的官方demo，發(fā)現(xiàn)官方是使用動態(tài)添加裁剪容器的方法，進行操作的，這里我們仿照官方進行實現(xiàn)。

// 初始化剪切
 initCropper () {
 let _this = this;
 // 初始化裁剪區(qū)域
 _this.imgObj = $('![](' + _this.imgCropperData.imgSrc + ')');
 let $avatarPreview = $('.avatar-preview');
 $('#myCropper-workspace').empty().html(_this.imgObj);
 _this.imgObj.cropper({
  aspectRatio: _this.proportionX / _this.proportionY,
  preview: $avatarPreview,
  crop: function(e) {

  }
 });
 }

確認裁剪并獲取base64格式的圖片信息

let $imgData = _this.imgObj.cropper('getCroppedCanvas')
imgBase64Data = $imgData.toDataURL('image/png');

構造用于上傳的數(shù)據(jù)

// 構造上傳圖片的數(shù)據(jù)
let formData = new FormData();
// 截取字符串
let photoType = imgBase64Data.substring(imgBase64Data.indexOf(",") + 1);
//進制轉換
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
 const byteCharacters = atob(b64Data);
 const byteArrays = [];
 for(let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
 const slice = byteCharacters.slice(offset, offset + sliceSize);
 const byteNumbers = new Array(slice.length);
 for(let i = 0; i < slice.length; i++) {
  byteNumbers[i] = slice.charCodeAt(i);
 }
 const byteArray = new Uint8Array(byteNumbers);
 byteArrays.push(byteArray);
 }
 const blob = new Blob(byteArrays, {
 type: contentType
 });
 return blob;
}
const contentType = 'image/jepg';
const b64Data2 = photoType;
const blob = b64toBlob(b64Data2, contentType);
formData.append("file", blob, "client-camera-photo.png")
formData.append("type", _this.imgType)

非父子組件之間的通信問題

在之前的項目中，常用到父子組件之間的通信傳參，一般用兩種方法

在router里面放置參數(shù)，然后通過調用route.params.xxx或者route.query.xxx進行獲取

通過props進行通信

這里我們使用eventBus進行組件之間的通信

步驟

1.聲明一個bus組件用于B組件把參數(shù)傳遞給A組件

//bus.js
import Vue from 'vue'; 
export default new Vue();

2.在A組件中引用bus組件，并實時監(jiān)聽其參數(shù)變化

// A.vue
import Bus from '../../components/bus/bus.js'
export default {
 components: { Bus },
 data () {},
 created: function () {
 Bus.$on('getTarget', imgToken => { 
  var _this = this;
  console.log(imgToken);
  ... 
 }); 
 }
}

3.B組件中同樣引用bus組件，來把參數(shù)傳給A組件

// B.vue
// 傳參
Bus.$emit('getTarget', imgToken);

參考：

vue-$on
vue-$emit
vue.js之路(4)——vue2.0s中eventBus實現(xiàn)兄弟組件通信

vue選圖截圖插件完整代碼

<template>
 <div class="myCropper-container">
 <div id="myCropper-workspace">
  <div class="myCropper-words" v-show="!imgCropperData.imgSrc">請點擊按鈕選擇圖片進行裁剪</div>
 </div>
 <div class="myCropper-preview" :class="isShort ? 'myCropper-preview-short' : 'myCropper-preview-long'">
  <div class="myCropper-preview-1 avatar-preview">
  ![](!imgCropperData.imgUploadSrc ? '/images/thumbnail/thumbnail-img.jpg' : imgCropperData.imgUploadSrc)
  </div>
  <div class="myCropper-preview-2 avatar-preview">
  ![](!imgCropperData.imgUploadSrc ? '/images/thumbnail/thumbnail-img.jpg' : imgCropperData.imgUploadSrc)
  </div>
  <div class="myCropper-preview-3 avatar-preview">
  ![](!imgCropperData.imgUploadSrc ? '/images/thumbnail/thumbnail-img.jpg' : imgCropperData.imgUploadSrc)
  </div>
  <input id="myCropper-input" type="file" :accept="imgCropperData.accept" ref="inputer" @change="handleFile">
  <Button type="ghost" class="myCropper-btn" @click="btnClick">選擇圖片</Button>
  <Button type="primary" class="myCropper-btn" :loading="cropperLoading" @click="crop_ok">確認</Button>
 </div>
 </div>
</template>
<script>
 var ezjsUtil = Vue.ezjsUtil;
 import Bus from './bus/bus.js' 
 export default {
 components: { Bus },
 props: {
  imgType: {
  type: String
  },
  proportionX: {
  type: Number
  },
  proportionY: {
  type: Number
  }
 },
 data () {
  return {
  imgCropperData: {
   accept: 'image/gif, image/jpeg, image/png, image/bmp',
   maxSize: 5242880,
   file: null, //上傳的文件
   imgSrc: '', //讀取的img文件base64數(shù)據(jù)流
   imgUploadSrc: '', //裁剪之后的img文件base64數(shù)據(jù)流
  },
  imgObj: null,
  hasSelectImg: false,
  cropperLoading: false,
  isShort: false,
  }
 },
 created: function () {
  let _this = this;
 },
 mounted: function () {
  let _this = this;
  // 初始化預覽區(qū)域
  let maxWidthNum = Math.floor(300 / _this.proportionX);
  let previewWidth = maxWidthNum * _this.proportionX;
  let previewHeight = maxWidthNum * _this.proportionY;
  if (previewWidth / previewHeight <= 1.7) {
  previewWidth = previewWidth / 2;
  previewHeight = previewHeight / 2;
  _this.isShort = true;
  }
  // 設置最大預覽容器的寬高
  $('.myCropper-preview-1').css('width', previewWidth + 'px');
  $('.myCropper-preview-1').css('height', previewHeight + 'px');
  // 設置中等預覽容器的寬高
  $('.myCropper-container .myCropper-preview .myCropper-preview-2').css('width',( previewWidth / 2) + 'px');
  $('.myCropper-container .myCropper-preview .myCropper-preview-2').css('height', (previewHeight / 2) + 'px');
  // 設置最小預覽容器的寬高
  $('.myCropper-container .myCropper-preview .myCropper-preview-3').css('width',( previewWidth / 4) + 'px');
  $('.myCropper-container .myCropper-preview .myCropper-preview-3').css('height', (previewHeight / 4) + 'px');
 },
 methods: {
  // 點擊選擇圖片
  btnClick () {
  let _this = this;
  // 模擬input點擊選擇文件
  document.getElementById('myCropper-input').click();
  },
  // 選擇之后的回調
  handleFile (e) {
  let _this = this;
  let inputDOM = this.$refs.inputer;
  // 通過DOM取文件數(shù)據(jù)
  _this.file = inputDOM.files[0];
  // 判斷文件格式
  if (_this.imgCropperData.accept.indexOf(_this.file.type) == -1) {
   _this.$Modal.error({
   title: '格式錯誤',
   content: '您選擇的圖片格式不正確！'
   });
   return;
  }
  // 判斷文件大小限制
  if (_this.file.size > 5242880) {
   _this.$Modal.error({
   title: '超出限制',
   content: '您選擇的圖片過大，請選擇5MB以內的圖片！'
   });
   return;
  }
  var reader = new FileReader();
  // 將圖片將轉成 base64 格式
  reader.readAsDataURL(_this.file);
  reader.onload = function () {
   _this.imgCropperData.imgSrc = this.result;
   _this.initCropper();
  }
  },
  // 初始化剪切
  initCropper () {
  let _this = this;
  // 初始化裁剪區(qū)域
  _this.imgObj = $('![](' + _this.imgCropperData.imgSrc + ')');
  let $avatarPreview = $('.avatar-preview');
  $('#myCropper-workspace').empty().html(_this.imgObj);
  _this.imgObj.cropper({
   aspectRatio: _this.proportionX / _this.proportionY,
   preview: $avatarPreview,
   crop: function(e) {
   }
  });
  _this.hasSelectImg = true;
  },
  // 確認
  crop_ok () {
  let _this = this, imgToken = null, imgBase64Data = null;
  // 判斷是否選擇圖片
  if (_this.hasSelectImg == false) {
   _this.$Modal.error({
   title: '裁剪失敗',
   content: '請選擇圖片，然后進行裁剪操作！'
   });
   return false;
  }
  // 確認按鈕不可用
  _this.cropperLoading = true;
  let $imgData = _this.imgObj.cropper('getCroppedCanvas')
  imgBase64Data = $imgData.toDataURL('image/png'); 
  // 構造上傳圖片的數(shù)據(jù)
  let formData = new FormData();
  // 截取字符串
  let photoType = imgBase64Data.substring(imgBase64Data.indexOf(",") + 1);
  //進制轉換
    const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
     const byteCharacters = atob(b64Data);
     const byteArrays = [];
     for(let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);
      const byteNumbers = new Array(slice.length);
      for(let i = 0; i < slice.length; i++) {
       byteNumbers[i] = slice.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
     }
     const blob = new Blob(byteArrays, {
      type: contentType
     });
     return blob;
  }
  const contentType = 'image/jepg';
    const b64Data2 = photoType;
  const blob = b64toBlob(b64Data2, contentType);
  formData.append("file", blob, "client-camera-photo.png")
  formData.append("type", _this.imgType)
  // ajax上傳
  $.ajax({
     url: _this.$nfs.uploadUrl,
     method: 'POST',
     data: formData,
     // 默認為true，設為false后直到ajax請求結束(調完回掉函數(shù))后才會執(zhí)行$.ajax(...)后面的代碼
     async: false,
     // 下面三個，因為直接使用FormData作為數(shù)據(jù)，contentType會自動設置，也不需要jquery做進一步的數(shù)據(jù)處理(序列化)。
     cache: false,
     contentType: false,
   processData: false,
   type: _this.imgType,
     success: function(res) {
   let imgToken = res.data.token;
   _this.cropperLoading = false;
   // 傳參
   Bus.$emit('getTarget', imgToken); 
     },
     error: function(error) {
   _this.cropperLoading = false;
   _this.$Modal.error({
    title: '系統(tǒng)錯誤',
    content: '請重新裁剪圖片進行上傳！'
   });
     }
    });
  },
 }
 }
</script>
<style lang="less" scoped>
 .myCropper-container {
 height: 400px;
 }
 .myCropper-container #myCropper-input {
 width: 0px;
 height: 0px;
 }
 .myCropper-container #myCropper-workspace {
 width: 500px;
 height: 400px;
 border: 1px solid #dddee1;
 float: left;
 }
 // 裁剪圖片未選擇圖片的提示文字
 .myCropper-container #myCropper-workspace .myCropper-words{
 text-align: center;
 font-size: 18px;
 padding-top: 180px;
 }
 // 裁剪圖片的預覽區(qū)域
 .myCropper-container .myCropper-preview-long {
 width: 300px;
 }
 .myCropper-container .myCropper-preview-short {
 width: 200px;
 }
 .myCropper-container .myCropper-preview {
 float: left;
 height: 400px;
 margin-left: 10px;
 }
 .myCropper-container .myCropper-preview .myCropper-preview-1 {
 border-radius: 5px;
 overflow: hidden;
 border: 1px solid #dddee1;
 box-shadow: 3px 3px 3px #dddee1;
 img {
  width: 100%;
  height: 100%;
 }
 }
 .myCropper-container .myCropper-preview .myCropper-preview-2 {
 margin-top: 20px;
 border-radius: 5px;
 overflow: hidden;
 border: 1px solid #dddee1;
 box-shadow: 3px 3px 3px #dddee1;
 img {
  width: 100%;
  height: 100%;
 }
 }
 .myCropper-container .myCropper-preview .myCropper-preview-3 {
 margin-top: 20px;
 border-radius: 5px;
 overflow: hidden;
 border: 1px solid #dddee1;
 box-shadow: 3px 3px 3px #dddee1;
 img {
  width: 100%;
  height: 100%;
 }
 }
 // 按鈕
 .myCropper-btn {
 float: left;
 margin-top: 20px;
 margin-right: 10px;
 }
</style>

BY-LucaLJX

github: lucaljx

總結

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

您可能感興趣的文章:

vue?ElementUI級聯(lián)選擇器回顯問題解決
這篇文章主要介紹了vue?ElementUI級聯(lián)選擇器回顯問題解決，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-09-09
VUE里如何修改element-ui的顯示層次與上下間隔
這篇文章主要介紹了VUE里如何修改element-ui的顯示層次與上下間隔問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vueScroll實現(xiàn)移動端下拉刷新、上拉加載
這篇文章主要介紹了vueScroll實現(xiàn)移動端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
Vue 使用依賴注入的方式共享數(shù)據(jù)的過程
賴注入的方式共享數(shù)據(jù)在Vue中是一種高級特性,它主要用于開發(fā)插件或庫,或者處理一些特殊的場景,這篇文章主要介紹了Vue 使用依賴注入的方式共享數(shù)據(jù),需要的朋友可以參考下
2023-11-11
vue3?reactive響應式依賴收集派發(fā)更新原理解析
這篇文章主要為大家介紹了vue3響應式reactive依賴收集派發(fā)更新原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子
今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
使用elementUI表單校驗函數(shù)validate需要注意的坑及解決
這篇文章主要介紹了使用elementUI表單校驗函數(shù)validate需要注意的坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue+antDesign實現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動
本文主要介紹了vue+antDesign實現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
vue3.0如何在全局掛載對象和方法
這篇文章主要介紹了vue3.0如何在全局掛載對象和方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法
這篇文章主要介紹了vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法，需要的朋友可以參考一下
2019-12-12