如何使用Cropper.js将裁剪后的圆形图片保存为文件并存入数据库

问题背景 #

已基于Cropper.js完成用户圆形图片裁剪功能，需将裁剪后的图片转为文件格式，上传并存储到数据库中。以下是优化后的完整实现代码：

完整HTML代码 #

<label for="change-me">选择头像</label>
<input
  class="form-control"
  type="file"
  name="change-me"
  id="change-me"
  accept="image/*"
/>

<button class="btn-primary save hide mt-2">保存裁剪结果</button>

<!-- 裁剪预览区域 -->
<div class="result"></div>
<!-- 圆形裁剪结果展示 -->
<div class="img-result hide">
  <img class="cropped hide" alt="裁剪后的圆形头像">
</div>
<!-- 裁剪尺寸配置选项 -->
<div class="options hide">
  <label>裁剪宽度：</label>
  <input type="number" class="img-w" value="200" min="100" max="500">
</div>
<!-- 提交表单（可选） -->
<form id="profile-pic-form" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="avatar" id="avatar-input">
</form>

完整JavaScript代码 #

// 获取DOM元素
const result = document.querySelector(".result");
const imgResult = document.querySelector(".img-result");
const imgWidthInput = document.querySelector(".img-w");
const saveBtn = document.querySelector(".save");
const croppedImgEl = document.querySelector(".cropped");
const fileInput = document.querySelector("#change-me");
const avatarForm = document.querySelector("#profile-pic-form");
const avatarInput = document.querySelector("#avatar-input");

let cropperInstance = null;
let croppedBlob = null;

// 文件选择事件处理
fileInput.addEventListener("change", (e) => {
  if (!e.target.files.length) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    if (!e.target.result) return;

    // 创建图片元素
    const img = document.createElement("img");
    img.id = "crop-image";
    img.src = e.target.result;
    img.style.maxHeight = "400px";

    // 清空预览区域并添加图片
    result.innerHTML = "";
    result.appendChild(img);

    // 显示操作按钮和选项
    saveBtn.classList.remove("hide");
    document.querySelector(".options").classList.remove("hide");

    // 初始化Cropper
    cropperInstance = new Cropper(img, {
      aspectRatio: 1, // 1:1比例适配圆形头像
      viewMode: 1,
      autoCropArea: 0.8, // 默认裁剪区域占比
      ready: () => {
        console.log("Cropper初始化完成");
      }
    });
  };
  reader.readAsDataURL(e.target.files[0]);
});

// 保存裁剪结果事件
saveBtn.addEventListener("click", async (e) => {
  e.preventDefault();
  if (!cropperInstance) return;

  // 获取裁剪后的Canvas
  const cropCanvas = cropperInstance.getCroppedCanvas({
    width: parseInt(imgWidthInput.value),
    imageSmoothingEnabled: true,
    imageSmoothingQuality: "high"
  });

  // 生成圆形Canvas
  const roundedCanvas = getRoundedCanvas(cropCanvas);

  // 展示裁剪后的圆形头像
  croppedImgEl.src = roundedCanvas.toDataURL();
  croppedImgEl.classList.remove("hide");
  imgResult.classList.remove("hide");

  // 将Canvas转为Blob对象（适合文件上传）
  croppedBlob = await new Promise((resolve) => {
    roundedCanvas.toBlob(resolve, "image/png", 0.9); // PNG格式保留透明背景，质量0.9
  });

  // 创建File对象，用于表单提交或AJAX上传
  const avatarFile = new File([croppedBlob], `avatar_${Date.now()}.png`, {
    type: "image/png"
  });

  // 方式1：赋值给隐藏表单input，配合表单提交
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(avatarFile);
  avatarInput.files = dataTransfer.files;

  // 方式2：直接发起AJAX上传（取消注释即可使用）
  // await uploadAvatar(avatarFile);
});

// 生成圆形Canvas的工具函数
function getRoundedCanvas(sourceCanvas) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const size = Math.min(sourceCanvas.width, sourceCanvas.height);

  canvas.width = size;
  canvas.height = size;

  // 创建圆形裁剪区域
  ctx.beginPath();
  ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.clip();

  // 将裁剪图绘制到圆形画布中
  ctx.drawImage(sourceCanvas, 
    (sourceCanvas.width - size) / 2, (sourceCanvas.height - size) / 2, size, size, 
    0, 0, size, size
  );

  return canvas;
}

// 可选：AJAX上传函数示例
async function uploadAvatar(file) {
  const formData = new FormData();
  formData.append("avatar", file);

  try {
    const response = await fetch("/api/upload-avatar", {
      method: "POST",
      body: formData
    });

    if (!response.ok) throw new Error("上传失败");
    const resData = await response.json();
    console.log("头像上传成功：", resData);
    // 上传成功后可更新页面头像、提示用户等
  } catch (error) {
    console.error("上传出错：", error);
  }
}

关键实现说明 #

1. 圆形裁剪优化
   • 先创建圆形裁剪区域再绘制图片，保证边缘平滑，同时自动适配图片尺寸
2. 文件转换与上传
   • 使用canvas.toBlob()替代toDataURL()，生成体积更小的Blob对象，更适合文件上传
   • 将Blob转为标准File对象，支持表单提交或AJAX两种上传方式
3. 代码健壮性
   • 增加空值判断，避免未选择文件或Cropper未初始化时出错
   • 使用const/let声明变量，避免全局变量污染

内容的提问来源于stack exchange，提问作者Will P