Käytä js:ää kuvanpakkauksen toteuttamiseen function

Käytä js:ää kuvanpakkaustoiminnon toteuttamiseen

2024-07-12

Kuvan pakkaaminen on ratkaisevassa roolissa monissa sovellusskenaarioissa, varsinkin kun asiakas lataa kuvia. Alkuperäiset kuvat ovat usein suuria. Suora lataaminen ei ainoastaan kuluta paljon kaistanleveysresursseja, vaan se voi myös hidastaa latausnopeutta, mikä vaikuttaa vakavasti käyttökokemukseen. Siksi kuvien pakkaamisesta ennen niiden lataamista palvelimelle on tullut keskeinen optimointitoimenpide. Pakkaaminen pienentää kuvatiedostojen kokoa merkittävästi, mikä nopeuttaa latausnopeutta, parantaa tehokkuutta ja varmistaa käyttäjille sujuvan ja vaivattoman käyttökokemuksen. Tämä optimointi on erityisen tärkeää, kun verkkoolosuhteet ovat huonot.
Lyhyesti sanottuna kuvanpakkaus voi tehokkaasti ratkaista suurten tiedostojen lataamisen aiheuttamat kaistanleveyspaineet ja aikakustannukset. Se on tehokas tapa parantaa sovelluksen vastausnopeutta ja lisätä käyttäjien tyytyväisyyttä. Se käsittelee kuvat älykkäästi, poistaa tarpeettomat tiedot ja pienentää huomattavasti tiedostokokoa säilyttäen samalla visuaalisen laadun mahdollisimman paljon, mikä tekee kuvien latausprosessista nopeamman ja tehokkaamman, mikä optimoi koko sovelluksen suorituskyvyn.

1. Vaikutusesittely

Lisää kuvan kuvaus tähän

2. Ohjelmakoodi

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

Teknologian jakaminen

Käytä js:ää kuvanpakkaustoiminnon toteuttamiseen

1. Vaikutusesittely

2. Ohjelmakoodi

Henkilökohtainen profiili

yhteystietoni