Bagaimana untuk Mengatasi Tepi Bergerigi dan Keputusan Kabur Apabila Mengubah Saiz Imej dengan Kanvas?

Menyelesaikan Isu Melicinkan Apabila Mengubah Saiz Imej Menggunakan Kanvas dalam JavaScript

Mengubah saiz imej menggunakan kanvas dalam JavaScript kadangkala boleh mengakibatkan tepi bergerigi atau kabur yang ketara. Untuk mencapai saiz semula yang lancar, teknik yang dikenali sebagai down-stepping boleh digunakan.

Dalam kebanyakan penyemak imbas, interpolasi linear digunakan untuk mengubah saiz secara lalai. Interpolasi dwikubik, yang menghasilkan hasil yang lebih lancar, melibatkan penggunaan kejiranan piksel yang lebih besar. Walau bagaimanapun, penyemak imbas biasanya tidak melaksanakan interpolasi dwikubik secara langsung.

Pendekatan menuruni langkah melibatkan saiz semula imej berulang kali, setiap kali menggunakan faktor skala yang lebih kecil. Ini meniru gelagat interpolasi dwikubik sambil masih menggunakan interpolasi linear dalam penyemak imbas asas.

Coretan kod berikut menunjukkan cara melaksanakan langkah turun:

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";

Kod ini mencipta kanvas sementara, oc, dan mengubah saiz imej secara berulang, akhirnya melukisnya ke kanvas akhir. Setiap langkah mengubah saiz menggunakan interpolasi linear, tetapi dengan menggabungkannya, kesan keseluruhan menghampiri interpolasi dwikubik.

Sifat imageSmoothingQuality juga boleh digunakan untuk mengawal kualiti pelicinan dalam Chrome, memberikan cara yang lebih langsung untuk mencapai kelancaran , tetapi ia belum lagi disokong dalam semua penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Tepi Bergerigi dan Keputusan Kabur Apabila Mengubah Saiz Imej dengan Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!