vue 如何使用vue-cropper裁剪图片你知道吗

官网:

https://github.com/xyxiao001/vue-cropper

一、安装:

npm install vue-cropper 

或者

yarn add vue-cropper

二、使用:

import VueCropper from 'vue-cropper'

设置component

export default {
  components: {
    VueCropper
  }
}

template中插入:(外面需要套一个div,用于设置插件显示的大小)


    data(){
      return{
         option:{
            img: 'imgUrl', // img的URL或者base64
            size: 1,
            outputType: 'png',
         }
      }
    }

三、内置方法:

名称 功能 默认值 可选值
img 裁剪图片的地址 url 地址 / base64 / blob
outputSize 裁剪生成图片的质量 1 0.1 - 1
outputType 裁剪图片的地址 jpg (jpg 需要传入jpeg) jpeg / png / web

内置方法:通过this.$refs.cropper 调用插件。

this.$refs.cropper.startCrop() 开始截图(如果没有设置截图框的话,通过这个启动截图框)

this.$refs.cropper.stopCrop() 停止截图

this.$refs.cropper.clearCrop() 清除截图

this.$refs.cropper.getCropData() 获取截图信息(得到截图的URL或者base64)

    // 获取截图的base64 数据
    this.$refs.cropper.getCropData((data) => {
      // do something
      console.log(data)
    })
    // 获取截图的blob数据
    this.$refs.cropper.getCropBlob((data) => {
      // do something
      console.log(data)
    })

四、使用:




效果:

vue 如何使用vue-cropper裁剪图片你知道吗_第1张图片

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

你可能感兴趣的