最近项目中有个选择图片后裁剪的需求，项目使用的是Vue。
1、安装
npm install --save vue-cropper
2、在组件中导入
<vueCropper
ref="cropper"
:img="option.img"
:info="false":outputSize="option.size"
:outputType="option.outputType"
:fixed-box="option.fixedBox"
:can-move="option.canMove"
:can-move-box="option.canMoveBox"
:auto-crop="option.autoCrop"
:auto-crop-width="option.autoCropWidth"
:auto-crop-height="option.autoCropHeight" >
</vueCropper>
<script>import { VueCropper } from "vue-cropper"
export default {
data() {
option: {
img: '',
size: 1,
outputType: "png",
full: false,
fixedBox: false,
canMove: true,
canMoveBox: true,
autoCrop: true,
original: false,
// 只有自动截图开启 宽度高度才生效
// autoCropWidth: 690,
// autoCropHeight: 518,
autoCropWidth: 345,
autoCropHeight: 259,
centerBox: false,
high: true,
}
},
components: { VueCropper },
}</script>
3、截图之后转图片
this.$refs.cropper.getCropData((data) => {}) // 这个方法将转成base64格式
this.$refs.cropper.getCropBlob((data) => {}) // 这个方法将转成Blob对象
