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

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

黄良钵

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

Vue图片上传裁剪插件 vue-cropper
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close