npm install vue-cropperjs cropperjs

import VueCropper from "vue-cropperjs";
import "cropperjs/dist/cropper.css";

<template>
  <div class="flex flex-col items-center">
    <!-- 選擇圖片 -->
    <div>
      <label for="avatar" class="cursor-pointer rounded-full"></label><!-- 這里使用了 Tailwind Css來控制樣式 -->
      <input
        type="file"
        id="avatar"
        @change="handleFileChange"
        accept="image/*"
        style="display: none"
      />
    </div>

    <!-- 裁剪區(qū)域 -->
    <div class="w-[200px] h-[200px]">
      <vue-cropper
        ref="cropper"
        :src="imageUrl"
        :aspect-ratio="1 / 1"
        :auto-crop-area="0.8"
        :view-mode="2"
        guides
        background
      ></vue-cropper>
    </div>

    <!-- 顯示裁剪后的圖片 -->
    <div v-if="croppedImage">
      <img
        class="w-[200px] h-[200px] rounded-full"
        :src="croppedImage"
        alt="裁剪后的圖片"
      />
    </div>

    <!-- 操作按鈕 -->
    <button @click="cropImage">裁剪圖片</button>
    <button @click="uploadFile">上傳圖片</button>
    <p v-if="errorMessage" style="color: red">{{ errorMessage }}</p>
    <p v-if="uploadStatus">{{ uploadStatus }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import VueCropper from "vue-cropperjs";
import "cropperjs/dist/cropper.css";

// 響應(yīng)式數(shù)據(jù)
const imageUrl = ref(""); // 原始圖片 URL
const croppedImage = ref(""); // 裁剪后的圖片 URL
const errorMessage = ref(""); // 錯(cuò)誤信息
const uploadStatus = ref(""); // 上傳狀態(tài)
const cropper = ref(null); // 裁剪組件實(shí)例

// 選擇圖片文件
const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    imageUrl.value = URL.createObjectURL(file); // 將文件轉(zhuǎn)換為 URL
  }
};

// 裁剪圖片
const cropImage = () => {
  cropper.value.getCroppedCanvas().toBlob((blob) => {
    croppedImage.value = URL.createObjectURL(blob); // 生成 Blob URL
  });
};

// 上傳圖片
const uploadFile = () => {
  if (!croppedImage.value) {
    errorMessage.value = "請先裁剪圖片";
    return;
  }

  // 獲取裁剪后的 Canvas 并轉(zhuǎn)換為 Blob
  cropper.value.getCroppedCanvas().toBlob((blob) => {
    // 創(chuàng)建 FormData 對象
    const formData = new FormData();
    formData.append("file", blob, "cropped-image.png"); // 將 Blob 添加到 FormData

    // 上傳到服務(wù)器，這里簡單做了個(gè)示范，根據(jù)后端接口或上傳方式自行更改
    fetch("/upload", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        uploadStatus.value = "上傳成功！";
        console.log("服務(wù)器返回的數(shù)據(jù)：", data);
      })
      .catch((error) => {
        errorMessage.value = "上傳失敗";
        console.error("上傳錯(cuò)誤：", error);
      });
  });
};
</script>

.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}