vue3多图拼接裁切

vue yekong

vue3多图拼接裁切

最近有个项目要求可以多图拖动裁剪,这里基础功能都满足的插件是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: '',
    }

组件下载

相关文件下载地址
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
vue3多图拼接裁切