JS 压缩图片|极客笔记

JS 压缩图片

在Web开发中，图片是不可或缺的资源之一。然而，随着页面中图片数量和大小的增加，可能会导致网页加载速度变慢，影响用户体验。为了解决这个问题，我们可以使用JavaScript来压缩图片，以减小图片文件的大小，从而提高页面加载速度。

为什么要压缩图片？

在Web开发中，图片是占据大部分页面体积的资源，尤其是高清图片或者拍摄的照片。这些大文件会导致页面加载速度变慢，影响用户的等待时间和体验。而通过压缩图片，可以减小图片文件的体积，从而减少页面加载时间，提高用户的访问速度和体验。

图片压缩的原理

图片的压缩原理可以简单理解为去除图片中冗余的信息，减小文件大小，而尽可能保持图片的质量。常见的压缩方式有有损压缩和无损压缩。

有损压缩：通过去除一些对人眼不太敏感的细节信息来减小文件大小，如JPEG格式的压缩。
无损压缩：保持图片质量的前提下减小文件大小，如PNG格式的无损压缩。

使用JavaScript实现压缩图片

现在我们来介绍如何使用JavaScript来实现图片的压缩。我们将使用HTML5的Canvas元素来将图片加载到画布上，然后通过Canvas的toDataURL方法将画布内容导出为压缩后的图片。

// 压缩图片函数
function compressImage(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) => {
            const img = new Image();
            img.src = event.target.result;
            img.onload = () => {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                let targetWidth = img.width;
                let targetHeight = img.height;

                // 按照比例缩放图片
                if (img.width > maxWidth || img.height > maxHeight) {
                    const ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
                    targetWidth = img.width * ratio;
                    targetHeight = img.height * ratio;
                }

                canvas.width = targetWidth;
                canvas.height = targetHeight;

                ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

                canvas.toBlob((blob) => {
                    resolve(blob);
                }, file.type, quality);
            };
        };
    });
}

// 选择文件
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = async (event) => {
    const file = event.target.files[0];
    const compressedImage = await compressImage(file, 800, 600, 0.7);
    const imageElement = document.createElement('img');
    imageElement.src = URL.createObjectURL(compressedImage);
    document.body.appendChild(imageElement);
};

document.body.appendChild(input);

上面代码中，我们定义了一个compressImage函数，该函数接收参数file（要压缩的图片文件）、maxWidth（最大宽度）、maxHeight（最大高度）和quality（压缩质量），并返回一个Promise对象。在函数内部，我们使用FileReader读取文件内容，将其加载到Image对象中，并创建一个Canvas画布来处理图片。根据设定的最大宽度和高度，计算出缩放后的图片尺寸，并使用drawImage方法将图片绘制到Canvas上。最后使用toBlob方法将画布内容导出为Blob对象，并通过Promise的resolve方法返回压缩后的图片。

在页面加载完成后，我们创建一个input元素用于选择文件，通过addEventListener监听change事件，读取用户选择的文件内容，并调用compressImage函数对图片进行压缩。压缩后的图片使用URL.createObjectURL方法生成临时URL，并将其显示在页面上。