• 当前标签:vue-cropper

程序开发 Vue图片上传裁剪插件 vue-cropper

一个挺好用的图像裁剪插件 vue-cropper 使用挺简单的,而且还提供demo对照查看 插件地址:https://github.com/xyxiao001/vue-cropper 首先安装插件: npm install vue-cropper --save 然后在使用的页面引入 import VueCropper from "vue-cropper" 在设置component export default {   components: {     VueCropper   }, } template中插入(外面需要套一个div,用于设置插件显示的大小) <vueCropper   ref="cropper"   :img="option.img"   :outputSize="option.size"   :outputType="option.outputType" ></vueCropper> data(){   return{      option:{         img: 'imgUrl', // img的URL或者base64         size: 1,         outputType: 'png',      }   } } 其他的看官方文档 内置方法 通过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) })

2018-06-28 13:45:33 179 0 0
阅读详情
  • 1
前往