js如何压缩图片到指定大小

在JavaScript中，压缩图片到指定大小通常需要依赖于第三方库，例如`image上传时自动压缩`或者`imgAreaSelect`等。这里有一个简单的例子，利用HTML5的`FileReader` API读取图片文件，然后使用`canvas`元素进行图片的绘制和压缩处理。

以下是一个基本步骤的例子：

1. 监听图片上传事件。
2. 读取图片文件并转换为`canvas`。
3. 根据指定大小调整`canvas`的尺寸。
4. 将调整后的图片绘制到`canvas`上，并转换为`blob`格式。
5. 用转换后的`blob`文件创建新的图片。

// 假设有一个上传按钮的id是'upload-input'
document.getElementById('upload-input').addEventListener('change', function(e) {
    const file = e.target.files[0]; // 获取上传的文件
    if (!file.type.match('image.*')) {
        return; // 非图片类型则直接返回
    }
    const img = new Image();
    img.onload = function() {
        let targetWidth = 800; // 指定的目标宽度
        let targetHeight = 600; // 指定的目标高度
        let canvas = document.createElement('canvas');
        let scale = Math.min(targetWidth / img.width, targetHeight / img.height);
        canvas.width = img.width * scale;
        canvas.height = img.height * scale;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(function(blob) {
            // 处理压缩后的图片blob对象
            let newImg = document.createElement('img');
            newImg.src = URL.createObjectURL(blob);
            // 将新图片插入到页面中或者进行其他处理
            document.body.appendChild(newImg);
        }, file.type, 1); // 第三个参数是图片的质量，范围0-1，值越低，压缩后的图片质量越差，文件越小
    };
    img.src = URL.createObjectURL(file);
});

上述代码示例展示了基本的图片压缩处理流程。在实际应用中，可能需要根据具体情况调整压缩质量和尺寸以满足特定需求。