js压缩图片怎么写

在JavaScript中，压缩图片可以通过使用Canvas API、FileReader API和Blob API来实现。首先，我们将图片加载到Canvas中，然后通过Canvas的toDataURL方法来获取压缩后的图片数据。这可以大大减小图片的体积，提升网页加载速度和用户体验。

一、加载图片到Canvas中

要压缩图片，首先需要将图片加载到Canvas中。这可以通过HTML的<input type="file">元素和FileReader API来实现。

使用FileReader加载图片

<input type="file" id="upload" accept="image/*">
<canvas id="canvas" style="display:none;"></canvas>

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

二、将图片绘制到Canvas上

在图片加载完成后，我们需要将图片绘制到Canvas上。这一步是压缩图片的关键，因为它允许我们对图片进行重新采样和压缩。

绘制图片到Canvas

function drawImageToCanvas(img) {
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    compressImage(canvas);
}

三、压缩图片

通过Canvas的toDataURL方法，我们可以获取到压缩后的图片数据。这个方法允许我们指定输出图片的格式和质量，从而实现压缩。

使用Canvas的toDataURL进行压缩

function compressImage(canvas) {
    let quality = 0.7; // 压缩质量，范围为0到1
    let compressedDataUrl = canvas.toDataURL('image/jpeg', quality);
    displayCompressedImage(compressedDataUrl);
}

四、展示压缩后的图片

为了验证压缩效果，我们可以将压缩后的图片展示在网页上。

在网页上展示压缩后的图片

function displayCompressedImage(dataUrl) {
    let img = document.createElement('img');
    img.src = dataUrl;
    document.body.appendChild(img);
}

五、优化和改进

为了更好地适应不同的应用场景，我们可以对上述代码进行一些优化和改进。例如，可以根据图片的尺寸动态调整Canvas的大小，以避免内存溢出；还可以提供更多的压缩选项以适应不同的需求。

动态调整Canvas大小

function drawImageToCanvas(img) {
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let maxWidth = 800; // 最大宽度
    let maxHeight = 800; // 最大高度
    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;
    ctx.drawImage(img, 0, 0, width, height);
    compressImage(canvas);
}

提供更多的压缩选项

<input type="range" id="quality" min="0" max="1" step="0.1" value="0.7">
<label for="quality">Compression Quality</label>

function compressImage(canvas) {
    let quality = document.getElementById('quality').value; // 从用户输入获取压缩质量
    let compressedDataUrl = canvas.toDataURL('image/jpeg', quality);
    displayCompressedImage(compressedDataUrl);
}

六、其他技巧和注意事项

在实际应用中，除了上述基本方法外，还有一些技巧和注意事项可以帮助你更好地压缩图片。

使用Web Workers

如果你需要压缩大量图片，可以考虑使用Web Workers来避免阻塞主线程。

处理不同格式的图片

不同格式的图片在压缩时可能会有不同的效果，特别是PNG和JPEG。可以根据需要动态选择压缩格式。

用户体验优化

在压缩和展示图片时，可以添加一些加载动画或进度指示，以提升用户体验。

七、使用第三方库

除了手动编写代码外，还有一些第三方库可以帮助你更方便地实现图片压缩功能。例如，compress.js 和 pica 是两个非常流行的JavaScript库。

使用compress.js

import Compress from 'compress.js';
const compress = new Compress();
document.getElementById('upload').addEventListener('change', function(event) {
    const files = [...event.target.files];
    compress.compress(files, {
        size: 4, // the max size in MB, defaults to 2MB
        quality: 0.75, // the quality of the image, max is 1, defaults to 0.75
        maxWidth: 800, // the max width of the output image, defaults to 1920px
        maxHeight: 800, // 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((data) => {
        console.log(data);
        displayCompressedImage(data[0].dataUrl);
    });
});

使用pica

import pica from 'pica';
const picaInstance = pica();
document.getElementById('upload').addEventListener('change', async function(event) {
    const file = event.target.files[0];
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = async () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const result = await picaInstance.resize(canvas, {
            width: 800,
            height: 800,
            quality: 3
        });
        const compressedDataUrl = result.toDataURL('image/jpeg', 0.75);
        displayCompressedImage(compressedDataUrl);
    };
});

通过上述方法，你可以在JavaScript中轻松实现图片的压缩功能，从而提升网页的性能和用户体验。