zip.js 怎么压缩图片

zip.js 是一个强大的 JavaScript 库，允许用户在浏览器中操作 ZIP 文件。要使用 zip.js 压缩图片，可以通过以下步骤来实现：加载 zip.js 库、读取图片文件、压缩图片、保存压缩后的 ZIP 文件。

一、加载 zip.js 库

在开始使用 zip.js 压缩图片之前，您需要先加载该库。可以通过 CDN 或直接下载 zip.js 文件并在 HTML 文件中引用。

<script src="https://cdn.jsdelivr.net/npm/zip.js@2.0.14/dist/zip.js"></script>

二、读取图片文件

为了读取图片文件，您可以使用 HTML 文件输入元素和 FileReader API。以下是一个简单的示例，展示了如何使用文件输入元素读取用户选择的图片文件。

<input type="file" id="imageInput" accept="image/*" multiple>

document.getElementById('imageInput').addEventListener('change', function(event) {
    const files = event.target.files;
    for (const file of files) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const imgDataUrl = e.target.result;
            console.log(imgDataUrl); // 这是图片的 base64 数据 URL
        };
        reader.readAsDataURL(file);
    }
});

三、压缩图片

接下来，您需要将读取到的图片文件压缩到一个 ZIP 文件中。zip.js 提供了一个方便的 API 来实现这一点。

document.getElementById('imageInput').addEventListener('change', function(event) {
    const files = event.target.files;
    const zipWriter = new zip.ZipWriter(new zip.BlobWriter("application/zip"));
    const addFilesToZip = async () => {
        for (const file of files) {
            const reader = new FileReader();
            reader.onload = async function(e) {
                const imgDataUrl = e.target.result;
                await zipWriter.add(file.name, new zip.Data64URIReader(imgDataUrl));
            };
            reader.readAsDataURL(file);
        }
    };
    addFilesToZip().then(async () => {
        const zipBlob = await zipWriter.close();
        console.log(zipBlob); // 这是压缩后的 ZIP 文件 Blob
        saveAs(zipBlob, 'images.zip'); // 使用 FileSaver.js 保存 ZIP 文件
    });
});

四、保存压缩后的 ZIP 文件

最后，您需要将压缩后的 ZIP 文件保存到用户的计算机上。您可以使用 FileSaver.js 库来实现这一点。

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

document.getElementById('imageInput').addEventListener('change', function(event) {
    const files = event.target.files;
    const zipWriter = new zip.ZipWriter(new zip.BlobWriter("application/zip"));
    const addFilesToZip = async () => {
        for (const file of files) {
            const reader = new FileReader();
            reader.onload = async function(e) {
                const imgDataUrl = e.target.result;
                await zipWriter.add(file.name, new zip.Data64URIReader(imgDataUrl));
            };
            reader.readAsDataURL(file);
        }
    };
    addFilesToZip().then(async () => {
        const zipBlob = await zipWriter.close();
        saveAs(zipBlob, 'images.zip');
    });
});

五、总结

通过以上步骤，您可以使用 zip.js 库在浏览器中压缩图片文件，并使用 FileSaver.js 库将压缩后的 ZIP 文件保存到用户的计算机上。以下是完整的示例代码，展示了如何实现这一功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Zipper</title>
    <script src="https://cdn.jsdelivr.net/npm/zip.js@2.0.14/dist/zip.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
</head>
<body>
    <input type="file" id="imageInput" accept="image/*" multiple>
    <script>
        document.getElementById('imageInput').addEventListener('change', function(event) {
            const files = event.target.files;
            const zipWriter = new zip.ZipWriter(new zip.BlobWriter("application/zip"));
            const addFilesToZip = async () => {
                for (const file of files) {
                    const reader = new FileReader();
                    reader.onload = async function(e) {
                        const imgDataUrl = e.target.result;
                        await zipWriter.add(file.name, new zip.Data64URIReader(imgDataUrl));
                    };
                    reader.readAsDataURL(file);
                }
            };
            addFilesToZip().then(async () => {
                const zipBlob = await zipWriter.close();
                saveAs(zipBlob, 'images.zip');
            });
        });
    </script>
</body>
</html>

通过上述完整的示例代码，您可以轻松地在浏览器中实现图片的压缩和保存。希望这篇文章对您有所帮助。