Vue+Cropper实现图片的裁剪等一系列界面交互功能

参考：

https://fengyuanchen.github.io/cropperjs/

https://www.cnblogs.com/linxiyue/archive/2019/01/18/10288490.html

https://www.jianshu.com/p/4644a626ef9a

https://www.cnblogs.com/tugenhua0707/p/8859291.html

npm install cropperjs

<template>
  <div>
    <div style="width: 750px; height: 500px; margin: 20px; border: dashed #cacaca 1px; text-align: center;">
      <img :src="cropperImg" style="max-width: 100%" ref="img">
    </div>
  </div>
</template>
 
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
 
export default {
  name: "ImgCropper",
  data () {
    return {
      cropperImg: '',
      cropper: '',
      imgName: ''
    }
  },
  mounted () {
    this.initCropper()
  },
  methods: {
    initCropper () {
      let cropper = new Cropper(this.$refs.img, {
        viewMode: 1,
        aspectRatio: 16/9,
      })
      this.cropper = cropper
    },
  }
}
</script>