js 选择图片 压缩上传

<input type="file" id="fileInput" accept="image/*">
<button onclick="uploadImage()">上传</button>

<script>
async function compressAndUpload(file) {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    await img.decode();

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const maxWidth = 800;
    const scale = Math.min(maxWidth / img.width, 1);
    canvas.width = img.width * scale;
    canvas.height = img.height * scale;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    const compressedBlob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.7));
    return compressedBlob;
}

async function uploadImage() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    if (!file) {
        alert('请选择一张图片');
        return;
    }

    const compressedBlob = await compressAndUpload(file);
    const formData = new FormData();
    formData.append('file', compressedBlob, file.name);

    fetch('/upload', {
        method: 'POST',
        body: formData
    }).then(response => response.json())
      .then(data => console.log('上传成功:', data))
      .catch(error => console.error('上传失败:', error));
}
</script>