Bagaimana untuk Mencapai Imej Bersaiz Licin dengan Kanvas HTML?

Melicinkan Imej dengan Kanvas

Mengubah saiz imej dengan kanvas HTML ialah tugas biasa, tetapi untuk mencapai kelancaran boleh menjadi satu cabaran. Walaupun perisian penyuntingan imej seperti Photoshop menawarkan pelbagai algoritma interpolasi seperti bicubic dan bilinear, tidak jelas sama ada kanvas menyokong pilihan ini.

<code class="js">var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 234;
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);</code>

Coretan kod di atas mengubah saiz imej menggunakan kanvas, tetapi imej yang diubah saiznya kurang lancar.

Untuk menangani perkara ini, konsep turun tangga boleh digunakan. Penyemak imbas biasanya menggunakan interpolasi linear untuk mengubah saiz, yang boleh mengakibatkan pengalianan. Dengan memecahkan proses penskalaan ke bawah kepada beberapa langkah, seseorang boleh mencapai hasil yang lebih dekat dengan interpolasi dwikubik.

Pertimbangkan kod yang diubah suai berikut:

<code class="js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {
    // set size proportional to image
    canvas.height = canvas.width * (img.height / img.width);

    // step 1 - resize to 50%
    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);

    // step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
        0, 0, canvas.width, canvas.height);
}
img.src = "//i.imgur.com/SHo6Fub.jpg";</code>

Kod ini melakukan berbilang langkah pensaizan semula berturut-turut, secara beransur-ansur mengurangkan saiz imej dan menggunakan interpolasi. Hasilnya ialah imej dengan tepi yang lebih licin dan kualiti visual yang dipertingkatkan.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Imej Bersaiz Licin dengan Kanvas HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!