如何压缩图片js

压缩图片的JS方法有多种，其中常用的包括使用Canvas API、通过第三方库如compress.js、image-compressor.js等。使用Canvas API可以实现自定义压缩效果，而第三方库则提供更方便的封装。我们将详细描述Canvas API的方法，因为它提供了较大的灵活性和控制力。

一、CANVAS API实现图片压缩

1、Canvas API简介

Canvas API是HTML5提供的绘图工具，可以在网页上绘制图形和处理图像。通过Canvas API，我们可以将图片绘制到画布上，然后通过调整画布的宽高和质量参数，达到压缩图片的目的。

2、使用Canvas API压缩图片的步骤

1. 获取图片文件： 首先，我们需要获取用户上传的图片文件，可以通过HTML文件输入元素实现。

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

2. 创建Canvas元素： 创建一个Canvas元素，用于绘制和处理图片。

<canvas id="canvas" style="display:none;"></canvas>

3. 读取图片文件： 使用FileReader API读取图片文件，并将其转换为Data URL。

document.getElementById('uploadImage').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        const img = new Image();
        img.src = e.target.result;
        img.onload = function() {
            compressImage(img);
        };
    };
});

4. 绘制图片到Canvas并压缩： 将图片绘制到Canvas上，并通过canvas.toDataURL方法设置压缩质量。

function compressImage(img) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const maxWidth = 800; // 设置最大宽度
    const maxHeight = 800; // 设置最大高度
    let width = img.width;
    let height = img.height;
    // 计算缩放比例
    if (width > height && width > maxWidth) {
        height = Math.round((maxWidth / width) * height);
        width = maxWidth;
    } else if (height > width && height > maxHeight) {
        width = Math.round((maxHeight / height) * width);
        height = maxHeight;
    }
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    // 将Canvas内容转化为Data URL，并设置压缩质量
    const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7); // 质量参数从0到1
    document.getElementById('compressedImage').src = compressedDataUrl;
}

5. 显示压缩后的图片： 将压缩后的Data URL设置为img元素的src属性，以便显示在网页上。

<img id="compressedImage">

3、Canvas API的优缺点

优点：

灵活性高： 可以自定义压缩参数和效果。
兼容性好： 支持大多数现代浏览器。
无需依赖第三方库： 仅使用原生JavaScript即可实现。

缺点：

实现相对复杂： 需要较多的代码和步骤。
性能可能受限： 对于大图片可能会有性能问题。

二、使用第三方库实现图片压缩

1、compress.js库

compress.js是一个轻量级的图片压缩库，使用非常简单。它支持多种图片格式，并提供了多种压缩选项。

安装和引入：

npm install compress.js

使用示例：

import Compress from 'compress.js';
const compress = new Compress();
document.getElementById('uploadImage').addEventListener('change', function(event) {
    const files = [...event.target.files];
    compress.compress(files, {
        size: 4, // 最大文件大小（MB）
        quality: 0.75, // 压缩质量
        maxWidth: 800, // 最大宽度
        maxHeight: 800, // 最大高度
        resize: true // 是否调整尺寸
    }).then((results) => {
        const img = results[0];
        const base64str = img.data;
        const imgExt = img.ext;
        const file = Compress.convertBase64ToFile(base64str, imgExt);
        document.getElementById('compressedImage').src = URL.createObjectURL(file);
    });
});

2、image-compressor.js库

image-compressor.js是另一个流行的图片压缩库，使用方法也非常简单。