Bagaimana untuk Mencapai Saiz Semula Lancar Imej Menggunakan Kanvas JavaScript?

Mengubah Saiz Imej dengan Lancar dengan Kanvas JavaScript

Walaupun kanvas JavaScript menawarkan keupayaan untuk mengubah saiz imej, mencapai kelancaran boleh menjadi satu cabaran. Berikut ialah penyelesaian untuk menangani isu ini:

Melangkah Turun untuk Hasil Yang Lebih Lancar

Kebanyakan penyemak imbas menggunakan interpolasi linear untuk saiz semula imej, mengakibatkan kekurangan kelancaran. Untuk mencapai hasil yang lebih baik, gunakan langkah turun, teknik yang melibatkan saiz semula imej dalam kenaikan yang lebih kecil. Ini menghampiri algoritma dwikubik, yang menggunakan grid 4x4 piksel untuk interpolasi.

Pelaksanaan

Pertimbangkan kod berikut:

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

img.onload = function () {

    // Step 1 - Shrink the image to half its size
    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 - Further reduce the image by half
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // Step 3 - Resize the image back to its intended dimensions
    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>

Dengan melaksanakan pendekatan berperingkat ini, anda boleh meningkatkan kelancaran imej yang diubah saiz dengan berkesan menggunakan kanvas JavaScript.

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