js 裁切 上传

<img id="image" src="path/to/image.jpg" alt="Picture">
<button id="crop-button">裁切并上传</button>

const image = document.getElementById('image');
const cropButton = document.getElementById('crop-button');

// 初始化Cropper.js
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9, // 可以根据需要设置裁切比例
  viewMode: 1,
  dragMode: 'crop',
  autoCropArea: 0.8,
  cropBoxMovable: true,
  cropBoxResizable: true,
});

cropButton.addEventListener('click', () => {
  // 获取裁切后的图片数据
  const canvas = cropper.getCroppedCanvas();
  
  // 将canvas转换为Blob对象
  canvas.toBlob((blob) => {
    // 创建FormData对象并添加裁切后的图片
    const formData = new FormData();
    formData.append('croppedImage', blob);
    
    // 发送POST请求上传图片
    fetch('/upload', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(data => {
      console.log('上传成功:', data);
    })
    .catch(error => {
      console.error('上传失败:', error);
    });
  }, 'image/jpeg'); // 可以根据需要设置图片格式和质量
});

const express = require('express');
const multer = require('multer');
const app = express();

// 设置文件存储
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  },
});

const upload = multer({ storage: storage });

// 处理上传请求
app.post('/upload', upload.single('croppedImage'), (req, res) => {
  res.json({ message: '图片上传成功！' });
});

app.listen(3000, () => {
  console.log('服务器已启动...');
});