\n
\n\n ![]()
\n
\n中等大小
\n \n
\n\n\n ![]()
\n
\n迷你大小
\n \n
\n```\n\n\n#### @imgMoving 图片移动回调函数\n\n返回的参数内容\n```js\n{\n moving: true, // moving 是否在移动\n axis: {\n x1: 1, // 左上角\n x2: 1，// 右上角\n y1: 1，// 左下角\n y2: 1 // 右下角\n }\n }\n```\n\n#### @cropMoving 截图框移动回调函数\n返回的参数内容\n```js\n{\n moving: true, // moving 是否在移动\n axis: {\n x1: 1, // 左上角\n x2: 1，// 右上角\n y1: 1，// 左下角\n y2: 1 // 右下角\n }\n }\n```\n\n\n### 2. 内置方法 和 属性\n通过 `this.$refs.cropper` 调用\n\n**属性**\n\n属性 | 说明\n--- | ---\nthis.$refs.cropper.cropW | 截图框宽度\nthis.$refs.cropper.cropH | 截图框高度\n\n\n**方法**\n\n方法 | 说明\n--- | ---\nthis.$refs.cropper.startCrop() | 开始截图\nthis.$refs.cropper.stopCrop() | 停止截图\nthis.$refs.cropper.clearCrop() | 清除截图\nthis.$refs.cropper.changeScale() | 修改图片大小 正数为变大 负数变小\nthis.$refs.cropper.getImgAxis() | 获取图片基于容器的坐标点\nthis.$refs.cropper.getCropAxis() | 获取截图框基于容器的坐标点\nthis.$refs.cropper.goAutoCrop | 自动生成截图框函数\nthis.$refs.cropper.rotateRight() | 向右边旋转90度\nthis.$refs.cropper.rotateLeft() | 向左边旋转90度\n\n**获取截图内容**\n\n获取截图的 base64 数据\n\n```js\nthis.$refs.cropper.getCropData(data => {\n // do something\n console.log(data) \n})\n```\n\n获取截图的 blob 数据\n```js\nthis.$refs.cropper.getCropBlob(data => {\n // do something\n console.log(data) \n})\n```\n\n\n\n\n\n## 三、相关文章参考\n- [shn_ui - vue-cropper ](https://shnhz.github.io/shn-ui/#/component/vue-cropper) - 野宁新之助\n- [vue全家桶开发管理后台—裁切图片](https://blog.csdn.net/qq_30632003/article/details/79639346) - 麻球科技-菅双鹏\n- [Vue-cropper 图片裁剪的基本原理](https://www.cnblogs.com/tugenhua0707/p/8859291.html) - 龙恩0707\n- [关于昵称和头像的总结（模仿微信）](https://zhuanlan.zhihu.com/p/45746753) - 秋晨光\n- [vue-cropper-h5](https://github.com/2277419213/vue-cropper-h5) - 居里栈栈\n\n## 四、交流\n有什么意见，或者 bug，或者想一起开发 `vue-cropper`， 或者想一起开发其他插件\n\n\n\n\n\n\n","readmeFilename":"README.md"}\n ![]()
\n
\n