Bagaimana untuk Mencapai Penskalaan Kecil Imej Berkualiti Tinggi dengan Kanvas HTML5?

Saiz Semula Imej Kanvas HTML5 (Skala Rendah) dengan Kualiti Tinggi

Mengubah saiz imej dalam penyemak imbas menggunakan kanvas HTML5 boleh mengakibatkan kualiti yang tidak baik, terutamanya apabila penurunan skala. Artikel ini menyiasat isu ini dan menyediakan penyelesaian untuk mencapai kualiti optimum semasa penskalaan bawah.

Melumpuhkan Interpolasi dan Melicin Imej

Kod CSS dan JS awal yang disediakan dalam soalan disertakan sifat untuk melumpuhkan interpolasi dan pelicinan imej:

image-rendering: optimizeQuality;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

Walau bagaimanapun, sifat ini tidak memberi kesan langsung kepada kualiti penskalaan bawah. Interpolasi dan pelicinan mengambil berat dengan mencipta piksel baharu, yang tidak berkaitan apabila mengecilkan saiz imej.

Downsampling lwn. Interpolasi

Isu dengan menurunkan skala imej dalam penyemak imbas adalah berkaitan kepada pensampelan turun dan bukannya interpolasi.

Dalam pensampelan rendah, penyemak imbas biasanya menggunakan kaedah mudah di mana mereka memilih satu piksel daripada imej sumber untuk setiap piksel dalam imej destinasi. Ini boleh mengakibatkan kehilangan butiran dan bunyi.

Algoritma Pensampelan Turun Pixel-Perfect

Untuk menyelesaikan isu ini, kami memerlukan algoritma pensampelan turun sempurna piksel yang mengambil semua sumber piksel ke dalam akaun. Coretan kod yang disediakan ialah contoh algoritma sedemikian:

function downScaleCanvas(cv, scale) {
    // Process all pixels in the source image
    for (sy = 0; sy < sh; sy++) {
        for (sx = 0; sx < sw; sx++) {
            // Calculate target pixel position and weights
            ...

            // Add weighted contributions to target buffer
            ...
        }
    }

    // Create result canvas and populate it
    ...

    return resCV;
}

Algoritma ini mengira sumbangan setiap piksel sumber kepada satu, dua atau empat piksel destinasi, memastikan semua butiran dikekalkan semasa penskalaan bawah.

Kepentingan Pelbagai Langkah Penskalaan Turun

Penskalaan bawah dalam berbilang langkah boleh menyebabkan peningkatan kekaburan dalam imej. Ini kerana ralat pembundaran terkumpul daripada operasi penurunan skala berturut-turut menghasilkan hingar yang lebih besar.

Perbandingan dengan Pendekatan Lain

Algoritma yang disediakan mengatasi prestasi teknik pensampelan rendah yang lain, seperti yang ditunjukkan dalam contoh gambar. Ia mencapai keseimbangan antara mengekalkan ketajaman dan meminimumkan hingar, walaupun dengan beberapa langkah penurunan skala.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Penskalaan Kecil Imej Berkualiti Tinggi dengan Kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!