在上传前用JavaScript压缩图片

在这个快速教程中，我们将使用JavaScript压缩带有文件输入元素的图像。我们将压缩图像并将它们保存回文件输入，以便上传。
为了确保用户可以上传图片，并防止超大图片被上传，我们可以在上传前压缩图片数据，而不必向用户提出各种要求。
如果您赶时间，或者觉得阅读代码本身更方便，可以跳转到这里的最终代码片段[1]。

获取选定的图像文件

在下面的示例中，我们将接受所有类型的文件，但只压缩图像。multiple 属性允许选择多个文件。

为了防止添加其他文件，我们可以将文件输入接受属性设置为 image/*。

让我们设置一个文件输入框，当用户选择了一个或多个文件时，我们将侦听 change 来检测。我们将在下一节处理 TODO 项目。

<input type="file" multiple class="my-image-field" />

<script>
    // 从文件输入中获取所选文件
    const input = document.querySelector('.my-image-field');
    input.addEventListener('change', (e) => {
        // 获取文件
        const { files } = e.target;

        // 未选定文件
        if (!files.length) return;

        // 对于文件列表中的每个文件
        for (const file of files) {
            // 我们不必压缩非图像文件
            if (!file.type.startsWith('image')) {
                // TODO: 不是图像
            }

            // TODO: 压缩图像
        }

        // TODO: 储存文件
    });
</script>

现在，当用户选择一个或多个图像文件时，我们的代码就会运行。接下来是压缩图像。

压缩图像

我们将实现 compressImage 函数。该函数将把传递的文件对象转换为 ImageBitmap，并将其绘制到 元素中，然后画布将使用 toBlob[2] API 返回压缩后的 JPEG。

请注意，我们也可以要求WEBP，但这(在撰写本文时)在 Safari 上不支持‍♂️

让我们开始吧。

<input type="file" multiple class="my-image-field" />

<script>
    const compressImage = async (file, { quality = 1, type = file.type }) => {
        // 获取图像数据
        const imageBitmap = await createImageBitmap(file);

        // 绘制到画布上
        const canvas = document.createElement('canvas');
        canvas.width = imageBitmap.width;
        canvas.height = imageBitmap.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(imageBitmap, 0, 0);

        // 变成Blob
        return await new Promise((resolve) =>
            canvas.toBlob(resolve, type, quality)
        );
    };

    // 从文件输入中获取所选文件
    const input = document.querySelector('.my-image-field');
    input.addEventListener('change', async (e) => {
        // 获取文件
        const { files } = e.target;

        // 未选择文件
        if (!files.length) return;

        // 对于文件列表中的每个文件
        for (const file of files) {
            // 我们不必压缩非图像文件
            if (!file.type.startsWith('image')) {
                // TODO: 不是图像
            }

            // 我们将文件压缩 50%
            const compressedFile = await compressImage(file, {
                // 0: 为最大压缩率
                // 1: 没有压缩
                quality: 0.5,

                // 我们想要一个 JPEG 文件
                type: 'image/jpeg',
            });
        }

        // TODO: 储存文件
    });
</script>

总结

我们已经学会了如何使用 canvas 和 DataTransfer 来设置一个不起眼的小脚本，帮助我们在上传前压缩图片。该脚本将使我们的用户更容易上传图片。
当然，我们还有很多需要改进的地方，例如，我们可以

• 调整图像大小以适应最大边界框。

• 将图像裁剪成一定的长宽比。

• 更好地处理错误输入并显示合适的错误信息。

• 确保我们能处理 Safari 内存问题。

如果我们需要一个更强大的解决方案，我们可以使用 FilePond[3] 来处理文件上传，它可以调整图像大小、压缩等。

如果我们需要更多的控制，我们可以使用 Pintura[4] 让用户在上传前编辑图片，Pintura 也可以直接替代我们的 compressImage 功能。

原文：https://pqina.nl/blog/compress-image-before-upload

参考资料

[1]跳转到这里的最终代码片段: https://pqina.nl/blog/compress-image-before-upload#saving-the-compressed-image-back-to-the-file-input

[2]toBlob: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

[3]FilePond: https://pqina.nl/filepond/

[4]Pintura: https://pqina.nl/pintura/