vue+图片裁剪vue-cropper以及api

前言：

        因为项目需要，需要实现一个上传完图片，对图片进行二次处理的需求，就使用了vue-cropper来实现这个功能，总的来说还是感觉非常不错的软件，这里分享下我的使用方法，以及vue-cropper的api（见最下）

实现效果：

实现步骤：

步骤一：项目中安装 vue-cropper

npm install vue-cropper

步骤二：在main.js中注册（经测试，单独页面注册可能会出不来）

import VueCropper from 'vue-cropper' 

Vue.use(VueCropper)

步骤三：在页面使用，这里直接提供封装好的组件 vue-cropper.vue（源代码在下面）

1、template部分

2、js部分

源代码：

API文档：

这里内置方法的话,我是可以提供可供拷贝的代码：

内置方法 通过this.$refs.cropper 调用
this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop 自动生成截图框函数
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度
图片加载的回调 imgLoad 返回结果success, error
获取截图信息
this.$refs.cropper.cropW 截图框宽度

this.$refs.cropper.cropH 截图框高度

完整api入口

到这里就结束了，有兴趣的朋友可以留言一起交流哈