Bagaimana untuk Melicinkan Imej Bersaiz dengan JavaScript Canvas?

Melicinkan Imej Bersaiz dengan Kanvas JavaScript

Mengubah saiz imej dengan kanvas HTML menyediakan cara mudah untuk memanipulasi visual dalam aplikasi web. Walau bagaimanapun, algoritma ubah saiz lalai boleh mengakibatkan imej berpixel atau bergerigi, tidak mempunyai kelancaran yang terdapat dalam perisian penyuntingan imej. Isu ini boleh diatasi dengan menggabungkan teknik pelicinan imej.

Satu pendekatan untuk mencapai kelancaran ialah penurunan skala dalam langkah. Kaedah ini melibatkan saiz semula imej secara beransur-ansur, menggunakan kenaikan yang lebih kecil. Sebagai contoh, daripada mengubah saiz imej asal secara langsung kepada 50%, anda boleh mengurangkannya kepada 75% dahulu, kemudian 62.5% dan seterusnya. Pendekatan tambahan ini mengurangkan kesan interpolasi piksel, menghasilkan hasil yang lebih lancar.

<code class="javascript">var oc = document.createElement('canvas'),
    octx = oc.getContext('2d');

oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img, 0, 0, oc.width, oc.height);

// ...

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);</code>

Kaedah lain ialah menetapkan sifat imageSmoothingQuality, yang disokong dalam penyemak imbas moden seperti Chrome. Sifat ini mengawal algoritma interpolasi yang digunakan untuk saiz semula imej. Dengan menetapkannya kepada "tinggi", penyemak imbas mungkin bertukar kepada kaedah interpolasi bikubik yang lebih maju, meningkatkan kelancaran imej.

<code class="javascript">canvas.getContext('2d', { imageSmoothingQuality: "high" });</code>

Menggunakan penskalaan bawah dalam langkah atau melaraskan kualiti pelicinan imej membolehkan pembangun mempertingkatkan penampilan saiz semula imej dengan kanvas JavaScript, mencipta hasil yang menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk Melicinkan Imej Bersaiz dengan JavaScript Canvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!