Bagaimana untuk Menurunkan Imej dalam Kanvas HTML5 dengan Kualiti Optimum?

Ubah Saiz Imej Kanvas HTML5 (Berskala Rendah) Kualiti Tinggi

Dalam HTML5, anda boleh menggunakan elemen kanvas untuk mengubah saiz imej, tetapi penskalaan bawah lalai kaedah selalunya menghasilkan kualiti yang rendah. Berikut ialah langkah-langkah untuk mencapai kualiti imej yang optimum apabila penskalaan bawah menggunakan kanvas:

1. Lumpuhkan Pelicinan Imej: Secara lalai, penyemak imbas menggunakan pelicinan imej untuk mengurangkan tepi bergerigi apabila mengubah saiz. Walau bagaimanapun, ini boleh mengaburkan imej. Untuk melumpuhkan pelicinan imej, tetapkan sifat CSS berikut:

<code class="css">canvas, img {
    image-rendering: optimizeQuality;
}</code>

2. Kekalkan Nisbah Aspek: Pastikan nisbah bidang kanvas anda sepadan dengan imej asal kepada mengelakkan herotan.
3. Gunakan Algoritma Penskalaan Turun Pixel-Perfect: Algoritma penskalaan bawah lalai yang digunakan oleh penyemak imbas selalunya memperkenalkan bunyi. Untuk menangani perkara ini, gunakan algoritma penurunan skala sempurna piksel yang mempertimbangkan sumbangan berbilang piksel sumber kepada setiap piksel sasaran. Berikut ialah contoh algoritma oleh GameAlchemist:

<code class="javascript">function downScaleImage(img, scale) {
    // Implementation goes here...
}</code>

4. Minimumkan Langkah Pensampelan Semula: Langkah penskalaan bawah berulang memperkenalkan hingar dan degradasi tambahan. Jika anda perlu menurunkan skala kepada saiz yang sangat kecil, pertimbangkan untuk menggunakan berbilang langkah tetapi dengan kenaikan skala yang lebih kecil untuk meminimumkan herotan.
5. Gunakan Imej Sumber Besar: Untuk memastikan imej yang dikecilkan mengekalkan ketajaman , adalah disyorkan untuk menggunakan imej sumber terbesar yang mungkin.
6. Ubah Suai Warna Selepas Ubah Saiz: Jika perlu, anda boleh mengubah suai warna dalam kanvas selepas mengubah saiz.
7. Enkod dalam Format Berkualiti Tinggi: Apabila menyimpan imej yang dikecilkan sebagai fail, pilih format berkualiti tinggi seperti PNG atau JPEG dengan tetapan berkualiti tinggi untuk mengekalkan butiran imej.

Contoh Penggunaan:

<code class="javascript">var img = document.createElement('img');
img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height = 200;
    var context = canvas.getContext('2d');
    context.imageSmoothingEnabled = false;
    context.drawImage(img, 0, 0, 300, 200);
    var scaledImage = downScaleImage(canvas, 0.5); // Downscale by half
    // Save or send the scaledImage using XMLHttpRequest
};
img.src = 'path/to/largeImage.jpg';</code>

Dengan mengikut langkah ini, anda boleh menurunkan skala imej dalam kanvas HTML5 dengan kualiti optimum dan mengekalkan butirannya walaupun apabila mengubah saiz kepada saiz yang lebih kecil.

Atas ialah kandungan terperinci Bagaimana untuk Menurunkan Imej dalam Kanvas HTML5 dengan Kualiti Optimum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!