Bagaimana untuk Mencapai Saiz Semula Imej Lancar dengan Kanvas JavaScript?

Saiz Semula Imej Lancar dengan Kanvas JavaScript

Apabila menukar saiz imej menggunakan kanvas, adalah perkara biasa untuk menghadapi masalah dengan kelancaran. Tidak seperti perisian seperti Photoshop atau penyemak imbas yang menggunakan algoritma seperti bicubic atau bilinear, kanvas tidak mempunyai ciri pelicinan terbina dalam.

Untuk mencapai saiz semula yang licin, anda boleh menggunakan down-stepping. Walaupun penyemak imbas biasanya menggunakan interpolasi linear semasa saiz semula imej, down-stepping menggunakan interpolasi dwilinear untuk menghasilkan hasil yang lebih halus. Dengan membahagikan proses kepada beberapa langkah, anda boleh menganggarkan hasil dwikubik.

Pertimbangkan coretan kod 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 = "image.jpg";</code>

Langkah pertama mengurangkan imej kepada 50% daripada asalnya saiz. Langkah kedua menurunkan skala imej perantaraan sekali lagi, menghasilkan pengurangan 25% terakhir. Akhir sekali, langkah ketiga melaraskan imej kepada saiz yang dikehendaki.

Dengan mengulangi proses penskalaan bawah beberapa kali, anda menganggarkan teknik interpolasi dwikubik yang lebih lancar. Pendekatan ini memberikan kanvas keupayaan untuk mengubah saiz imej dengan kelancaran yang dipertingkatkan, menghampiri kualiti yang dilihat dalam program perisian dan penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Saiz Semula Imej Lancar dengan Kanvas JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!