Bagaimana untuk Meregangkan Imej Tanpa Antialiasing dalam Pelayar?

Regangan Imej Tanpa Antialiasing dalam Penyemak Imbas

Regangan imej tanpa antialiasing ialah cabaran biasa yang dihadapi oleh pembangun web, terutamanya apabila berurusan dengan seni piksel . Secara tradisinya, kaedah seperti CSS, JavaScript dan HTML telah digunakan untuk meregangkan imej, tetapi ia selalunya memperkenalkan kekaburan yang tidak diingini disebabkan oleh antialiasing.

CSS dan Penyemak Imbas Moden

Versi terkini Chrome dan Firefox memperkenalkan sifat CSS baharu yang dipanggil pemaparan imej. Dengan menetapkan sifat ini kepada piksel, adalah mungkin untuk melumpuhkan antialiasing apabila meregangkan imej. Walau bagaimanapun, kaedah ini belum lagi boleh dipercayai, kerana Chrome dan FF telah menghentikan sokongan untuknya.

Penyelesaian Berasaskan Kanvas

API Kanvas menyediakan penyelesaian untuk meregangkan imej tanpa antialiasing. Kod di bawah menunjukkan cara membuat imej berskala pada kanvas:

<code class="javascript">var img = new Image();
img.onload = function() {

    var scale = 8;

    var src_canvas = document.createElement('canvas');
    src_canvas.width = this.width;
    src_canvas.height = this.height;

    var src_ctx = src_canvas.getContext('2d');
    src_ctx.drawImage(this, 0, 0);
    var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;

    var dst_canvas = document.getElementById('canvas');
    dst_canvas.width = this.width * scale;
    dst_canvas.height = this.height * scale;
    var dst_ctx = dst_canvas.getContext('2d');

    var offset = 0;
    for (var y = 0; y < this.height; ++y) {
        for (var x = 0; x < this.width; ++x) {
            var r = src_data[offset++];
            var g = src_data[offset++];
            var b = src_data[offset++];
            var a = src_data[offset++] / 100.0;
            dst_ctx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')';
            dst_ctx.fillRect(x * scale, y * scale, scale, scale);
        }
    }
};</code>

Kod ini menyalin data piksel daripada imej sumber ke kanvas destinasi berskala, meregangkan imej dengan berkesan tanpa antialiasing.

Atas ialah kandungan terperinci Bagaimana untuk Meregangkan Imej Tanpa Antialiasing dalam Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!