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

原创 黄良钵  2018-06-28 13:45  阅读 336 次 评论 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. })
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情