cropperjs图片上传裁剪插件

cropperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括IE9以上的现代浏览器。（关键是使用方法简单，几行代码就可以搞定）

实践效果图

　　如图，可以对指定的图片进行裁剪，可以自己选择裁剪的交互方式，如大小、纵横比等 还可以预览裁剪区域，确认裁剪后可以生成一个包含裁剪图的canvas对象，借助canvas的toDataURL方法可以生成一张Base64格式的图片。还有另外一种不使用canvas的方式，利用该工具丰富的api可以拿到裁剪区域相对于原图的各项数据，使用这些数据进行css绝对定位即可展示裁剪后的图，该方式可以保证图片不失真和完整。

 

实践关键代码

　　用vue框架做了一个小demo，使用方法非常简单，关键就是要了解这个工具丰富的能力，并且知道何时使用它。

<template>
  <div class="hello">
    <p>预览</p>
    <div class="before"></div>
    <iy-button style="margin: 30px auto;" type="error" @click="sureSava">裁剪</iy-button>
    <div class="container">
      <div class="img-container">
        <img src="../assets/test.jpg" ref="image" alt=""> 
      </div>
      <div class="afterCropper">
        <img :src="afterImg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  name: 'HelloWorld',
  data () {
    return {
      myCropper: nu