js如何把图片压缩成100k

要将图片压缩成100k，可以使用压缩算法、调整图片尺寸、降低图片质量、使用合适的图片格式、利用浏览器API进行压缩。其中，利用浏览器API进行压缩是一个非常高效且方便的方法。通过使用JavaScript，你可以在客户端直接进行图片的压缩，无需将图片上传到服务器进行处理。

一、图片格式的选择

不同的图片格式在压缩效果和质量上有显著差异。常见的图片格式包括JPEG、PNG和WebP。

JPEG：适合照片和复杂颜色的图片，压缩率高。
PNG：适合图标和透明背景的图片，质量高但文件较大。
WebP：谷歌推出的新型图片格式，兼顾了JPEG和PNG的优点，压缩率高且质量好。

二、使用Canvas API进行图片压缩

Canvas API 是一个非常强大的工具，可以用于图片的各种操作，包括压缩。以下是一个使用Canvas API压缩图片的示例代码：

function compressImage(file, quality, callback) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (event) {
        const img = new Image();
        img.src = event.target.result;
        img.onload = function () {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            canvas.toBlob(function (blob) {
                callback(blob);
            }, 'image/jpeg', quality);
        }
    }
}

三、调整图片尺寸

通过调整图片尺寸，可以显著减少图片的文件大小。以下是调整图片尺寸的代码示例：

function resizeImage(file, maxWidth, maxHeight, callback) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (event) {
        const img = new Image();
        img.src = event.target.result;
        img.onload = function () {
            const canvas = document.createElement('canvas');
            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;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);
            canvas.toBlob(function (blob) {
                callback(blob);
            }, 'image/jpeg', 0.7);
        }
    }
}

四、降低图片质量

降低图片质量也是一种常见的压缩方法。通过降低JPEG图片的质量参数，可以显著减少文件大小。以下是降低图片质量的代码示例：

function compressImageQuality(file, quality, callback) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (event) {
        const img = new Image();
        img.src = event.target.result;
        img.onload = function () {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            canvas.toBlob(function (blob) {
                callback(blob);
            }, 'image/jpeg', quality);
        }
    }
}

五、综合使用多种方法

通过综合使用调整图片尺寸和降低图片质量，可以更有效地将图片压缩到100k以下。以下是一个综合使用多种方法的代码示例：

function compressAndResizeImage(file, maxWidth, maxHeight, quality, callback) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (event) {
        const img = new Image();
        img.src = event.target.result;
        img.onload = function () {
            const canvas = document.createElement('canvas');
            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;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);
            canvas.toBlob(function (blob) {
                if (blob.size > 100 * 1024) {
                    compressImageQuality(blob, quality, callback);
                } else {
                    callback(blob);
                }
            }, 'image/jpeg', quality);
        }
    }
}

六、使用第三方库

除了使用原生JavaScript进行图片压缩外，你还可以使用一些第三方库，如compress.js和pica.js，这些库提供了更简便和高效的图片压缩方法。

使用compress.js

import Compress from 'compress.js';
const compress = new Compress();
const files = [...fileInputElement.files];
compress.compress(files, {
    size: 4, // 最大文件大小，单位为MB
    quality: 0.75, // 压缩质量
    maxWidth: 1920, // 最大宽度
    maxHeight: 1920, // 最大高度
    resize: true, // 是否调整尺寸
}).then((data) => {
    const img = data[0];
    const base64str = img.data;
    const imgExt = img.ext;
    const file = Compress.convertBase64ToFile(base64str, imgExt);
    console.log(file);
});

使用pica.js

import pica from 'pica';
const picaInstance = pica();
const file = fileInputElement.files[0];
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function () {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    picaInstance.resize(img, canvas, {
        quality: 3,
        alpha: true
    }).then(result => {
        return picaInstance.toBlob(result, 'image/jpeg', 0.90);
    }).then(blob => {
        console.log(blob);
    });
}

七、结论

通过使用以上方法，你可以有效地将图片压缩到100k以下。首先选择合适的图片格式，然后使用Canvas API进行压缩和调整尺寸，最后降低图片质量。如果需要更高效的方法，可以考虑使用第三方库如compress.js和pica.js。希望这些方法能帮助你在项目中更好地处理图片压缩问题。