Bagaimanakah Saya Boleh Mengubah Saiz Imej pada Kanvas HTML5 Tanpa Kehilangan Kualiti?

Cara Mengubah Saiz Imej dalam Kanvas HTML5

Apabila mengubah saiz imej menggunakan JavaScript dan kanvas HTML5, adalah perkara biasa untuk menemui kualiti imej yang lemah apabila mengecilkan imej. Isu ini timbul kerana algoritma saiz semula lalai dalam kebanyakan penyemak imbas menggunakan interpolasi Nearest Neighbor, yang membawa kepada hasil berpiksel.

Untuk mencapai kualiti saiz semula yang lebih baik, anda boleh melaksanakan algoritma yang lebih maju, seperti pensampelan semula Lanczos, yang mengekalkan imej ketajaman dan kelancaran.

Berikut ialah pelaksanaan JavaScript bagi algoritma pensampelan semula Lanczos untuk imej mengubah saiz dalam kanvas:

function thumbnailer(elem, img, sx, lobes) {
    // ... (code remains the same as in the reference answer)
}

Dengan algoritma ini, anda boleh mengubah saiz imej dengan kualiti yang sangat baik dan mengelakkan penampilan berpiksel. Contohnya:

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); // You can adjust the lobes parameter for different levels of sharpness
    document.body.appendChild(canvas);
};

Dengan menggunakan kod ini, penyemak imbas boleh menghasilkan imej bersaiz berkualiti tinggi, memastikan pengalaman pengguna yang lebih baik dan memelihara integriti visual anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Imej pada Kanvas HTML5 Tanpa Kehilangan Kualiti?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!