Bagaimana Anda Boleh Mengubah Saiz Imej Bahagian Klien Menggunakan JavaScript Tanpa Flash?

Saiz Semula Imej pada Bahagian Pelanggan dengan JavaScript: Penyelesaian Sumber Terbuka

Dalam landskap pembangunan web hari ini, selalunya wajar untuk mengubah saiz imej pada bahagian klien sebelum ini memuat naiknya ke pelayan. Pendekatan ini boleh mengoptimumkan kualiti imej, mengurangkan beban pelayan dan meningkatkan pengalaman pengguna dengan mempercepatkan masa memuatkan halaman.

Walaupun Flash telah menjadi pilihan biasa untuk mengubah saiz imej, ramai pembangun memilih untuk mengelakkan penggunaannya. Nasib baik, terdapat penyelesaian yang menggunakan JavaScript untuk mengubah saiz imej dengan berkesan.

Algoritma Saiz Semula Imej Sumber Terbuka

Algoritma sumber terbuka tersedia di GitHub (https://gist .github.com/dcollien/312bce1270a5f511bf4a) menyediakan kaedah yang boleh dipercayai untuk mengubah saiz imej sisi klien. Ia menawarkan versi ES6 dan versi .js yang boleh disertakan dalam teg skrip.

Pelaksanaan

Untuk melaksanakan algoritma saiz semula, ikut langkah berikut:

1. Tambah kod HTML seperti yang ditunjukkan di bawah:

<code class="HTML"><input type="file" id="select">
<img  id="preview" alt="Bagaimana Anda Boleh Mengubah Saiz Imej Bahagian Klien Menggunakan JavaScript Tanpa Flash?" ></code>

2. Tambah kod JavaScript di bawah:

<code class="JavaScript">document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};</code>

Ciri dan Sokongan

Algoritma ini mempunyai pelbagai ciri dan sokongan, termasuk:

• Mengubah saiz berdasarkan lebar dan ketinggian maksimum yang ditentukan
• Pengesanan sokongan dan polyfills untuk keserasian merentas penyemak imbas
• Pengecualian GIF animasi untuk kecekapan

Atas ialah kandungan terperinci Bagaimana Anda Boleh Mengubah Saiz Imej Bahagian Klien Menggunakan JavaScript Tanpa Flash?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!