@moment-design/crop-image v0.0.2

裁剪图片组件

使用组件

安装依赖

npm install @moment-design/crop-image --save

使用组件

<template>
  <m-button type="primary" @click="refLAdvancedCropper.open()">
    触发裁剪弹窗
  </m-button>
  <CropImage
    ref="refLAdvancedCropper"
    img="https://preapiconsole.71360.com/w3/w475wn/20250116/967e3e343193b65f7108432f73e8e5a1.png"
    :others="{ stencilProps: { aspectRatio: 1 / 1 } }"
    @handle:ok="handleOk"
  ></CropImage>
  <div style="margin-top: 16px">Base64 length: {{ v1?.length }}</div>
  <div style="margin-top: 16px">Blob size: {{ v2?.size }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CropImage from '@moment-design/crop-image';

const v1 = ref();
const v2 = ref();

const refLAdvancedCropper = ref();
const handleOk = (canvas: any) => {
  if (canvas) {
    // base64
    const base64 = canvas.toDataURL();
    v1.value = base64;
    // blob
    canvas.toBlob((blob: any) => {
      v2.value = blob;
    });
    // do uload v1 or v2 ...
  }
};
</script>

API

Props

https://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html

Events

Expose