Usa js per implementare la compressione delle immagini function

Usa js per implementare la funzione di compressione delle immagini

2024-07-12

La compressione delle immagini gioca un ruolo cruciale in molti scenari applicativi, soprattutto quando il client carica le immagini. Le immagini originali sono spesso di grandi dimensioni. Il caricamento diretto non solo consuma molte risorse di larghezza di banda, ma può anche causare velocità di caricamento lente, compromettendo seriamente l'esperienza dell'utente. Pertanto, comprimere le immagini prima di caricarle sul server è diventata una misura di ottimizzazione chiave. Attraverso la compressione, la dimensione dei file immagine viene notevolmente ridotta, accelerando così la velocità di caricamento, migliorando l'efficienza e garantendo agli utenti un'esperienza fluida e senza problemi. Questa ottimizzazione è particolarmente importante quando le condizioni della rete sono scarse.
In breve, la compressione delle immagini può risolvere efficacemente la pressione sulla larghezza di banda e i problemi di tempo causati dal caricamento di file di grandi dimensioni. È un mezzo efficace per migliorare la velocità di risposta delle applicazioni e aumentare la soddisfazione dell'utente. Elabora in modo intelligente le immagini, rimuove i dati ridondanti e riduce notevolmente le dimensioni dei file mantenendo il più possibile la qualità visiva, rendendo il processo di caricamento delle immagini più veloce ed efficiente, ottimizzando così le prestazioni dell'intera applicazione.

1. Dimostrazione degli effetti

Inserisci qui la descrizione dell'immagine

2. Codice del programma

<!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

Condivisione della tecnologia

Usa js per implementare la funzione di compressione delle immagini

1. Dimostrazione degli effetti

2. Codice del programma

Profilo personale

le mie informazioni di contatto