vue移动端裁剪图片结合插件Cropper的使用实例代码

之前写了一个上传头像的功能模块，以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。

当然，使用就安装 npm install cropperjs

接着再引入 import Cropper from 'cropperjs'


下面是源码

<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="crop">确定</button> 

 </div> 

 <div style="padding:20px;">
  <div class="show">
   <div class="picture" :style="'backgroundImage:url('+headerImage+')'">
   </div>
  </div>
  <div style="margin-top:20px;">
   <input type="file" id="change" accept="image" @change="change">
   <label for="change"></label>
  </div> 

 </div>
 </div>
</template> 

<script>
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 () {
  //这边写图片的上传
 }
 }
}
</script> 

<style>
*{
 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 <= -height) */
 display: block;
 min-width: 0 !important;
 max-width: none !important;
 min-height: 0 !important;
 max-height: none !important;
 width: 100%;
 height: 100%;
 image-orientation: 0deg
} 

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
} 

.cropper-wrap-box {
 overflow: hidden;
} 

.cropper-drag-box {
 opacity: 0;
 background-color: #fff;
} 

.cropper-modal {
 opacity: .5;
 background-color: #000;
} 

.cropper-view-box {
 display: block;
 overflow: hidden; 

 width: 100%;
 height: 100%; 

 outline: 1px solid #39f;
 outline-color: rgba(51, 153, 255, 0.75);
} 

.cropper-dashed {
 position: absolute; 

 display: block; 

 opacity: .5;
 border: 0 dashed #eee
} 

.cropper-dashed.dashed-h {
 top: 33.33333%;
 left: 0;
 width: 100%;
 height: 33.33333%;
 border-top-width: 1px;
 border-bottom-width: 1px
} 

.cropper-dashed.dashed-v {
 top: 0;
 left: 33.33333%;
 width: 33.33333%;
 height: 100%;
 border-right-width: 1px;
 border-left-width: 1px
} 

.cropper-center {
 position: absolute;
 top: 50%;
 left: 50%; 

 display: block; 

 width: 0;
 height: 0; 

 opacity: .75
} 

.cropper-center:before,
 .cropper-center:after {
 position: absolute;
 display: block;
 content: ' ';
 background-color: #eee
} 

.cropper-center:before {
 top: 0;
 left: -3px;
 width: 7px;
 height: 1px
} 

.cropper-center:after {
 top: -3px;
 left: 0;
 width: 1px;
 height: 7px
} 

.cropper-face,
.cropper-line,
.cropper-point {
 position: absolute; 

 display: block; 

 width: 100%;
 height: 100%; 

 opacity: .1;
} 

.cropper-face {
 top: 0;
 left: 0; 

 background-color: #fff;
} 

.cropper-line {
 background-color: #39f
} 

.cropper-line.line-e {
 top: 0;
 right: -3px;
 width: 5px;
 cursor: e-resize
} 

.cropper-line.line-n {
 top: -3px;
 left: 0;
 height: 5px;
 cursor: n-resize
} 

.cropper-line.line-w {
 top: 0;
 left: -3px;
 width: 5px;
 cursor: w-resize
} 

.cropper-line.line-s {
 bottom: -3px;
 left: 0;
 height: 5px;
 cursor: s-resize
} 

.cropper-point {
 width: 5px;
 height: 5px; 

 opacity: .75;
 background-color: #39f
} 

.cropper-point.point-e {
 top: 50%;
 right: -3px;
 margin-top: -3px;
 cursor: e-resize
} 

.cropper-point.point-n {
 top: -3px;
 left: 50%;
 margin-left: -3px;
 cursor: n-resize
} 

.cropper-point.point-w {
 top: 50%;
 left: -3px;
 margin-top: -3px;
 cursor: w-resize
} 

.cropper-point.point-s {
 bottom: -3px;
 left: 50%;
 margin-left: -3px;
 cursor: s-resize
} 

.cropper-point.point-ne {
 top: -3px;
 right: -3px;
 cursor: ne-resize
} 

.cropper-point.point-nw {
 top: -3px;
 left: -3px;
 cursor: nw-resize
} 

.cropper-point.point-sw {
 bottom: -3px;
 left: -3px;
 cursor: sw-resize
} 

.cropper-point.point-se {
 right: -3px;
 bottom: -3px;
 width: 20px;
 height: 20px;
 cursor: se-resize;
 opacity: 1
} 

@media (min-width: 768px) { 

 .cropper-point.point-se {
 width: 15px;
 height: 15px
 }
} 

@media (min-width: 992px) { 

 .cropper-point.point-se {
 width: 10px;
 height: 10px
 }
} 

@media (min-width: 1200px) { 

 .cropper-point.point-se {
 width: 5px;
 height: 5px;
 opacity: .75
 }
} 

.cropper-point.point-se:before {
 position: absolute;
 right: -50%;
 bottom: -50%;
 display: block;
 width: 200%;
 height: 200%;
 content: ' ';
 opacity: 0;
 background-color: #39f
} 

.cropper-invisible {
 opacity: 0;
} 

.cropper-bg {
 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
} 

.cropper-hide {
 position: absolute; 

 display: block; 

 width: 0;
 height: 0;
} 

.cropper-hidden {
 display: none !important;
} 

.cropper-move {
 cursor: move;
} 

.cropper-crop {
 cursor: crosshair;
} 

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
 cursor: not-allowed;
} 

</style> 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。