最近有个项目要求可以多图拖动裁剪,这里基础功能都满足的插件是vue-cropper但是这个插件只支持一张图操作,当前项目需要多图在一个画板里拖动拼接,所以只能二次调整vue-cropper,我们将vue-cropper插件从github上下载下来,然后调整。
使用组件
import vueCropper from "@/components/vue-cropper/multipleIndex.vue";
<vueCropper ref="cropperRef" v-if="isShowInner" v-bind="option"></vueCropper>
const option = ref({
img: [img1, img2],
size: 1,
full: false,
outputType: "png",
canMove: true,
fixedBox: false,
original: false,
canMoveBox: true,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 200,
autoCropHeight: 150,
centerBox: false,
high: false,
cropData: {},
enlarge: 1,
mode: 'contain',
maxImgSize: 3000,
limitMinSize: [50, 50],
fixed: false,
fixedNumber: [2, 1],
fillCover: '',
}