vue中使用cropperjs

這次帶給大家vue中如何使用cropperjs，vue中使用cropperjs的注意事項有哪些，以下就是實戰案例，一起來看一下。

用vue的專案裡需要對圖片進行裁剪，於是使用了cropperjs，在使用的過程中也踩過一些坑，以下是在.vue文件裡cropperjs的使用方法和經驗教訓總結：

在使用之前，先引入：

在專案裡，運行：

npm install cropperjs -save

在template裡：

<p> 
  <!-- 遮罩层 --> 
  </p><p> 
   </p><p> 
    <img  src="/static/imghwm/default1.png" data-src="url" class="lazy" alt="vue中使用cropperjs" > 
   </p>
   <button>确定</button>
   
  <p> 
    </p><p> 
     </p><p> 
     </p> 
    
    <p> 
     <input> 
     <label></label> 
    </p> 
   
 

js程式碼：

import Cropper from 'cropperjs' 
export default { 
 components: { 
 }, 
 data () { 
  return { 
   headerImage:'', 
   picValue:'', 
   cropper:'', 
   croppable:false, 
   panel:false, 
   url:'' 
  } 
 }, 
 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; 
   } 
  }); 
 }, 
 methods: { 
  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 ; 
  }, 
  change (e) { 
   let files = e.target.files || e.dataTransfer.files; 
   if (!files.length) return; 
   this.panel = true; 
   this.picValue = files[0]; 
   this.url = this.getObjectURL(this.picValue); 
   //每次替换图片要重新得到新的url 
   if(this.cropper){ 
    this.cropper.replace(this.url); 
   } 
   this.panel = true; 
  }, 
  crop () { 
    this.panel = false; 
    var croppedCanvas; 
    var roundedCanvas; 
    if (!this.croppable) { 
     return; 
    } 
    // Crop 
    croppedCanvas = this.cropper.getCroppedCanvas(); 
    console.log(this.cropper) 
    // Round 
    roundedCanvas = this.getRoundedCanvas(croppedCanvas); 
    this.headerImage = roundedCanvas.toDataURL(); 
    this.postImg() 
  }, 
  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 () { 
   //这边写图片的上传 
  } 
 } 
}

整體效果：

##css程式碼（比較長，本來想不貼上了，但是為了一下童鞋可以直接運行demo，還是貼上了，篇幅過長，望見諒）：

*{ 
 margin: 0; 
 padding: 0; 
} 
#demo #button { 
 position: absolute; 
 right: 10px; 
 top: 10px; 
 width: 80px; 
 height: 40px; 
 border:none; 
 border-radius: 5px; 
 background:white; 
} 
#demo .show { 
 width: 100px; 
 height: 100px; 
 overflow: hidden; 
 position: relative; 
 border-radius: 50%; 
 border: 1px solid #d5d5d5; 
} 
#demo .picture { 
 width: 100%; 
 height: 100%; 
 overflow: hidden; 
 background-position: center center; 
 background-repeat: no-repeat; 
 background-size: cover;  
} 
#demo .container { 
  z-index: 99; 
  position: fixed; 
  padding-top: 60px; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  background:rgba(0,0,0,1); 
}
#demo #image { 
 max-width: 100%; 
}
.cropper-view-box,.cropper-face { 
 border-radius: 50%; 
} 
/*! 
 * Cropper.js v1.0.0-rc 
 * https://github.com/fengyuanchen/cropperjs 
 * 
 * Copyright (c) 2017 Fengyuan Chen 
 * Released under the MIT license 
 * 
 * Date: 2017-03-25T12:02:21.062Z 
 */
.cropper-container { 
 font-size: 0; 
 line-height: 0;
 position: relative;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 direction: ltr; 
 -ms-touch-action: none; 
 touch-action: none
} 
.cropper-container img { 
 /* Avoid margin top issue (Occur only when margin-top <p style="text-align: left;"> </p><p style="text-align: left;"><span style="color: #ff0000"></span></p>#我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ <p></p>推薦閱讀：<p></p><p>怎麼實作微信web端後退強制刷新<a href="http://www.php.cn/js-tutorial-388955.html" target="_blank"></a></p><p>用js快速的取得html頁面中圖片的位址<a href="http://www.php.cn/js-tutorial-388951.html" target="_blank"></a><br></p><p>設定cookie過期自動更新與自動取得<a href="http://www.php.cn/js-tutorial-388941.html" target="_blank"></a><br>#</p>

以上是vue中使用cropperjs的詳細內容。更多資訊請關注PHP中文網其他相關文章！