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. })
  7. // 获取截图的blob数据
  8. this.$refs.cropper.getCropBlob((data) => {
  9.   // do something
  10.   console.log(data)
  11. })

版权声明: 本站文章除特别声明外，均为本站原创。转载请注明出处，谢谢。

本文地址: https://blog.bg7zag.com/1615

  • 1人 Love
  • 2人 Haha
  • 2人 Wow
  • 1人 Sad
  • 0人 Angry
Vue、vue-cropper、图片剪裁

作者简介： BG7ZAG

打赏

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

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

Loading...