js 图片压缩上传

// HTML部分
<input type="file" id="upload" accept="image/*">
<canvas id="canvas" style="display:none;"></canvas>

// JavaScript部分
document.getElementById('upload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    const img = new Image();
    const reader = new FileReader();
    reader.onload = function(e) {
        img.src = e.target.result;
    };
    img.onload = function() {
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 设置压缩后的尺寸
        const maxWidth = 800;
        const maxHeight = 600;
        let width = img.width;
        let height = img.height;

        if (width > height) {
            if (width > maxWidth) {
                height *= maxWidth / width;
                width = maxWidth;
            }
        } else {
            if (height > maxHeight) {
                width *= maxHeight / height;
                height = maxHeight;
            }
        }

        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);

        // 导出压缩后的图片数据
        const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8); // 0.8为压缩质量

        // 上传图片（示例使用Fetch API）
        fetch('/upload', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ image: compressedDataUrl })
        }).then(response => response.json())
          .then(data => console.log('Success:', data))
          .catch(error => console.error('Error:', error));
    };
    reader.readAsDataURL(file);
});