Gunakan js untuk mengimplementasikan fungsi kompresi gambar

2024-07-12

Kompresi gambar memainkan peran penting dalam banyak skenario aplikasi, terutama saat klien mengunggah gambar. Gambar asli seringkali berukuran besar. Pengunggahan langsung tidak hanya menghabiskan banyak sumber daya bandwidth, namun juga dapat menyebabkan kecepatan pengunggahan yang lambat, sehingga sangat memengaruhi pengalaman pengguna. Oleh karena itu, mengompresi gambar sebelum mengunggahnya ke server telah menjadi langkah optimasi utama. Melalui kompresi, ukuran file gambar berkurang secara signifikan, sehingga mempercepat kecepatan unggah, meningkatkan efisiensi, dan memastikan pengguna mendapatkan pengalaman yang lancar dan bebas kerumitan. Optimalisasi ini sangat penting ketika kondisi jaringan buruk.
Singkatnya, kompresi gambar dapat secara efektif menyelesaikan masalah tekanan bandwidth dan biaya waktu yang disebabkan oleh pengunggahan file besar. Ini adalah cara yang efektif untuk meningkatkan kecepatan respons aplikasi dan meningkatkan kepuasan pengguna. Ini secara cerdas memproses gambar, menghapus data yang berlebihan, dan sangat mengurangi ukuran file sambil menjaga kualitas visual semaksimal mungkin, membuat proses pengunggahan gambar lebih cepat dan efisien, sehingga mengoptimalkan kinerja seluruh aplikasi.

1. Demonstrasi efek

Masukkan deskripsi gambar di sini

2. Kode program

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

Berbagi teknologi

Gunakan js untuk mengimplementasikan fungsi kompresi gambar

1. Demonstrasi efek

2. Kode program

Profil pribadi

informasi kontak saya