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

原文地址
http://blog.csdn.net/xiaogezl/article/details/70227025

之前写了一个上传头像的功能模块，以下的内容是描述上传头像过程中裁剪图片插件结合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>