Используйте js для реализации сжатия изображений function

Используйте js для реализации функции сжатия изображений

2024-07-12

Сжатие изображений играет решающую роль во многих сценариях приложений, особенно когда клиент загружает изображения. Исходные изображения часто имеют большой размер. Прямая загрузка не только потребляет много ресурсов полосы пропускания, но также может привести к снижению скорости загрузки, что серьезно влияет на удобство использования. Поэтому сжатие изображений перед их загрузкой на сервер стало ключевой мерой оптимизации. Благодаря сжатию размер файлов изображений значительно уменьшается, что ускоряет скорость загрузки, повышает эффективность и обеспечивает пользователям бесперебойную и беспроблемную работу. Эта оптимизация особенно важна при плохих условиях сети.
Короче говоря, сжатие изображений может эффективно решить проблемы с нагрузкой на полосу пропускания и временными затратами, вызванные загрузкой больших файлов. Это эффективное средство повышения скорости отклика приложений и повышения удовлетворенности пользователей. Он интеллектуально обрабатывает изображения, удаляет избыточные данные и значительно уменьшает размер файла, сохраняя при этом максимально возможное визуальное качество, делая процесс загрузки изображений более быстрым и эффективным, тем самым оптимизируя производительность всего приложения.

1. Демонстрация эффекта

Вставьте сюда описание изображения

2. Программный код

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        div {
            text-align: center;
        }

        input {
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <input id="file" type="file" accept="image/*">
    <div>压缩前的图片大小：<span id="beforeSize"></span>
        <p><img id="before" /></p>
    </div>
    <div>压缩后的图片大小：<span id="afterSize"></span>
        <p>
            <img id="after" />
        </p>
    </div>
    <script>
        $("#file").change(function () {
            const file = this.files[0];
            $("#before").attr("src", URL.createObjectURL(file));
            $("#before").css({
                width: '500',
                height: 'auto'
            });
            const fileSize = file.size / 1024;
            $("#beforeSize").html(fileSize.toFixed(2) + " KB");
            if (!file) return;
            compressImage(file, 1, 0.7).then(base64 => {
                $("#after").attr("src", base64);
                $("#after").css({
                    width: '500',
                    height: 'auto'
                });
                const sizeInKB = (base64.length * 3 / 4) / 1024;
                $("#afterSize").html(sizeInKB.toFixed(2) + " KB");
            });
        });

        function compressImage(file, maxWidth, quality) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const img = new Image();
                    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);
                        resolve(canvas.toDataURL('image/jpeg', quality || 0.9));
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            });
        }
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

Обмен технологиями

Используйте js для реализации функции сжатия изображений

1. Демонстрация эффекта

2. Программный код

Личный профиль

моя контактная информация