Javascript - 如何將圖像縮小到特定文件大小？

Question

在將它們上傳到服務器之前，我在 Base64 中對我的圖像進行編碼。 我需要將他們的文件大小縮小到特定大小 (500kB)。 我試圖獲得原始文件大小和所需文件大小之間的比率，並相應地減少高度和寬度。 但它不起作用。 有什么幫助嗎？

Answer 1

我和你有同樣的問題，我需要在將圖像上傳到我的服務器之前調整圖像大小。 所以我首先想到的是計算像素數來確定字節數。 但很快我注意到大多數圖像格式都使用壓縮。 例如，只有白色像素的 1000x1000 圖片將只是普通圖像尺寸的一小部分。 所以這就是為什么我認為很難將任何維度預先計算為字節數。 所以我使用二進制搜索算法來嘗試找到應該用於減少寬度和高度的百分比。 該圖像將多次調整大小以找到完美的百分比，因此效率不高，但我想不出任何其他方法。

// maxDeviation is the difference that is allowed default: 50kb
// Example: targetFileSizeKb = 500 then result will be between 450kb and 500kb
// increase the deviation to reduce the amount of iterations.
async function resizeImage(dataUrl, targetFileSizeKb, maxDeviation = 50) {
    let originalFile = await urltoFile(dataUrl, 'test.png', 'image/png');
    if (originalFile.size / 1000 < targetFileSizeKb)
        return dataUrl; // File is already smaller

    let low = 0.0;
    let middle = 0.5;
    let high = 1.0;

    let result = dataUrl;

    let file = originalFile;

    while (Math.abs(file.size / 1000 - targetFileSizeKb) > maxDeviation) {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        const img = document.createElement('img');

        const promise = new Promise((resolve, reject) => {
            img.onload = () => resolve();
            img.onerror = reject;
        });

        img.src = dataUrl;

        await promise;

        canvas.width = Math.round(img.width * middle);
        canvas.height = Math.round(img.height * middle);
        context.scale(canvas.width / img.width, canvas.height / img.height);
        context.drawImage(img, 0, 0);
        file = await urltoFile(canvas.toDataURL(), 'test.png', 'image/png');

        if (file.size / 1000 < (targetFileSizeKb - maxDeviation)) {
            low = middle;
        } else if (file.size / 1000 > targetFileSizeKb) {
            high = middle;
        }

        middle = (low + high) / 2;
        result = canvas.toDataURL();
    }

    return result;
}

function urltoFile(url, filename, mimeType) {
    return (fetch(url)
            .then(function (res) {
                return res.arrayBuffer();
            })
            .then(function (buf) {
                return new File([buf], filename, {type: mimeType});
            })
    );
}

https://jsfiddle.net/qnhmytk4/3/

Answer 2

https://www.npmjs.com/package/browser-image-compression這個包有 maxSizeMB 的選項，看起來很合法。

Answer 3

其他一些用戶也有同樣的問題。 也許這可以幫助你：

JavaScript 使用 based64 編碼代碼減小圖像的大小和質量

就我而言，沒有辦法使用 javascript 在客戶端減少圖像的文件大小。