vue 中 截图或者裁剪图片

需求是做个在一张图片上截取部分功能,类似于截图,也是裁剪,如果是截图可以用html2canvas 来做,它是用canvas来做的,会把你指定的dom通过canvas转成图片,但是如果你要截取部分,这个就不好用,这次我用的是vue-cropper 这个插件

npm install vue-cropper
引入

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

template 部分

<template>
  <div>
    <div style="width: 600px; height: 400px">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.outputSize"
        :outputType="option.outputType"
        :full="option.full"
      ></vueCropper>
      <img :src="ImgSrc" alt="" />
      <Button @click="start">开始截图</Button>
      <Button @click="end">结束截图</Button>
    </div>
  </div>
</template>

javascript部分

<script>
  import { VueCropper } from 'vue-cropper';
  export default {
    components: {
      VueCropper
    },
    data() {
      return {
        headImg: '',
        // 剪切图片上传
        crap: false,
        previews: {},
        option: {
          img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=994548078,2275672242&fm=26&gp=0.jpg',
          outputSize: 1, // 剪切后的图片质量（0.1-1）
          full: true, // 输出原图比例截图 props名full
          outputType: 'png',
          canMove: true,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          autoCropWidth: 300,
          autoCropHeight: 150,
          fixedBox: true
        },
        ImgSrc: ''
      }
    },
    methods: {

      start() {
        this.$refs.cropper.startCrop()
      },
      end() {
        this.$refs.cropper.getCropData((data) => {
          console.log(data)
          this.ImgSrc = data   //转成base64了
          if (data) {    // 拿到之后再清除
            this.$refs.cropper.clearCrop()
          }
        })
      }
    }

  }
</script>

接下来你就可以看到效果了