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)
    })

四、使用：

效果：

总结

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