<script setup>
import { onMounted, ref } from 'vue';
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

var cropper;
const imageRef = ref('imageRef')
const cropImage = ref('')

onMounted(() => {
  if (!imageRef.value) {
    return
  }
  cropper = new Cropper(imageRef.value, {
    aspectRatio: 1,// 裁切尺寸比值
    viewMode: 0,// 0 允许图片小于裁剪区域
    dragMode: 'move',
  })
})

function onCrop() {
  const canvas = cropper.getCroppedCanvas({maxWidth: 1024, maxHeight: 1024})
  cropImage.value = canvas.toDataURL()
  console.log(cropper.getCropBoxData(), cropper.getData());
}

</script>

<template>
  <div>
    <p style="margin-bottom: 0;">
      安装命令：<pre>pnpm add cropperjs</pre>
    </p>

    <a href="https://github.com/fengyuanchen/cropperjs" target="_blank">
      访问 cropperjs
    </a>
    <div style="height: 512px;">
      <img ref="imageRef" src="/images/logo.png" class="block">
    </div>
    <a @click="onCrop">
      裁剪
    </a>
    <img v-if="cropImage" :src="cropImage" class="block">
  </div>
</template>