Vue图片上传裁剪插件 vue-cropper

BG7ZAG

分类: 程序开发 5767 0

Vue图片上传裁剪插件 vue-cropper

一个挺好用的图像裁剪插件 vue-cropper

使用挺简单的,而且还提供demo对照查看

插件地址:https://github.com/xyxiao001/vue-cropper

首先安装插件:

  1. npm install vue-cropper --save

然后在使用的页面引入

  1. import VueCropper from "vue-cropper"

在设置component

  1. export default {
  2.   components: {
  3.     VueCropper
  4.   },
  5. }

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

  1. <vueCropper
  2.   ref="cropper"
  3.   :img="option.img"
  4.   :outputSize="option.size"
  5.   :outputType="option.outputType"
  6. ></vueCropper>
  1. data(){
  2.   return{
  3.      option:{
  4.         img: 'imgUrl', // img的URL或者base64
  5.         size: 1,
  6.         outputType: 'png',
  7.      }
  8.   }
  9. }

其他的看官方文档

内置方法 通过this.$refs.cropper 调用

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

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

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

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

  1. // 获取截图的base64 数据
  2. this.$refs.cropper.getCropData((data) => {
  3.   // do something
  4.   console.log(data)
  5. })
  6. // 获取截图的blob数据
  7. this.$refs.cropper.getCropBlob((data) => {
  8.   // do something
  9.   console.log(data)
  10. })
  • 1人 Love
  • 2人 Haha
  • 2人 Wow
  • 1人 Sad
  • 0人 Angry
Vue、vue-cropper、图片剪裁

作者简介: BG7ZAG

打赏

博客站长,前端开发工程师

共 0 条评论关于 “Vue图片上传裁剪插件 vue-cropper”

Loading...