js怎么把图片压缩到指定大小

JS可以通过多种方法将图片压缩到指定大小，包括使用Canvas API、FileReader API、压缩库等。推荐使用Canvas API、FileReader API、压缩库（如compress.js）。

使用Canvas API是一种常见的方法。首先，可以通过FileReader API读取图片文件，然后将其绘制到Canvas上，再通过Canvas的toDataURL方法获取压缩后的图片数据。接下来，我们将详细介绍如何在实际项目中实现图片压缩。

一、准备工作

在开始编码之前，需要先确保了解以下基础知识：

FileReader API：用于读取文件内容。
Canvas API：用于绘制和操作图像。
Blob和DataURL：用于处理图像数据。

二、读取图片文件

首先，我们需要使用FileReader API读取用户上传的图片文件。通过读取文件内容，可以获取图片的原始数据。

function readImage(file, callback) {
    const reader = new FileReader();
    reader.onload = function(event) {
        const img = new Image();
        img.onload = function() {
            callback(img);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(file);
}

三、绘制到Canvas并压缩

在读取到图片后，可以将其绘制到Canvas上，并通过Canvas API进行图像压缩。

function compressImage(img, quality, callback) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    const dataUrl = canvas.toDataURL('image/jpeg', quality);
    callback(dataUrl);
}

四、获取压缩后的图片数据

通过Canvas的toDataURL方法，可以获取压缩后的图片数据，并将其转换为Blob对象以便进一步处理。

function dataURLtoBlob(dataUrl) {
    const parts = dataUrl.split(',');
    const mime = parts[0].match(/:(.*?);/)[1];
    const bstr = atob(parts[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type: mime});
}

五、综合代码实现

下面是一个完整的代码示例，展示如何通过上述步骤实现图片压缩：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Compression</title>
</head>
<body>
    <input type="file" id="upload" accept="image/*">
    <script>
        document.getElementById('upload').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                readImage(file, function(img) {
                    compressImage(img, 0.7, function(dataUrl) {
                        const compressedBlob = dataURLtoBlob(dataUrl);
                        console.log('Compressed Image Blob:', compressedBlob);
                    });
                });
            }
        });
        function readImage(file, callback) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.onload = function() {
                    callback(img);
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }
        function compressImage(img, quality, callback) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            const dataUrl = canvas.toDataURL('image/jpeg', quality);
            callback(dataUrl);
        }
        function dataURLtoBlob(dataUrl) {
            const parts = dataUrl.split(',');
            const mime = parts[0].match(/:(.*?);/)[1];
            const bstr = atob(parts[1]);
            let n = bstr.length;
            const u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type: mime});
        }
    </script>
</body>
</html>

六、使用第三方压缩库

除了Canvas API，还可以使用一些第三方库，如compress.js，来简化图片压缩的过程。这些库通常提供更高级和简化的接口，使得图片压缩变得更加容易。

以下是使用compress.js的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Compression with compress.js</title>
    <script src="https://cdn.jsdelivr.net/npm/compress.js"></script>
</head>
<body>
    <input type="file" id="upload" accept="image/*">
    <script>
        document.getElementById('upload').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const compress = new Compress();
                compress.compress([file], {
                    size: 4, // the max size in MB, defaults to 2MB
                    quality: 0.75, // the quality of the image, max is 1
                    maxWidth: 1920, // the max width of the output image, defaults to 1920px
                    maxHeight: 1920, // the max height of the output image, defaults to 1920px
                    resize: true // defaults to true, set false if you do not want to resize the image width and height
                }).then((results) => {
                    const img = results[0];
                    console.log('Compressed Image Blob:', img.data);
                });
            }
        });
    </script>
</body>
</html>

七、压缩图片的实际应用

在实际项目中，图片压缩可以应用于多种场景，如用户头像上传、产品图片上传等。通过压缩图片，可以显著减少图片文件大小，提高网页加载速度和用户体验。

此外，还可以结合一些项目管理系统，如研发项目管理系统PingCode和通用项目协作软件Worktile，更好地管理和协作项目中的图片资源。

八、总结

通过以上方法，可以灵活地使用JavaScript实现图片压缩，包括使用Canvas API、FileReader API和第三方压缩库。希望本文能帮助你更好地理解和应用图片压缩技术，提高项目的性能和用户体验。

核心要点总结：

FileReader API：用于读取图片文件。
Canvas API：用于绘制和压缩图片。
Blob和DataURL：用于处理图片数据。
compress.js库：提供简化的压缩接口。

通过合理利用这些技术，可以有效地压缩图片文件，提升网页性能和用户体验。