Bagaimana untuk Meregangkan Imej Tanpa Antialiasing dalam Pelayar?

Meregangkan Imej Tanpa Antialiasing dalam Penyemak Imbas

Dalam bidang seni piksel, meregangkan imej kepada saiz yang lebih besar sambil mengekalkan tepi segarnya boleh menjadi cabaran. Algoritma penskalaan selalunya memperkenalkan antialiasing yang tidak diingini, mengaburkan garis tajam dan menjejaskan estetik yang diingini.

Untuk menangani isu ini, beberapa kaedah telah diterokai, termasuk:

Teknik CSS

Percubaan awal menggunakan CSS, JavaScript dan HTML terbukti tidak berkesan, menyebabkan imej kabur akibat antialiasing. Walau bagaimanapun, sifat CSS baharu muncul sebagai penyelesaian:

image-rendering: pixelated;

Harta ini melumpuhkan antialiasing, memberikan imej rupa yang jelas dan berpiksel. Ia berfungsi dengan baik dalam penyemak imbas moden seperti Chrome, Firefox dan juga IE7-8.

Pendekatan Kanvas

Untuk penyemak imbas tanpa sokongan untuk pemaparan imej, pendekatan yang lebih kompleks pendekatan menggunakan API Kanvas boleh digunakan. Berikut ialah coretan kod JavaScript yang menyalin piksel daripada imej sumber dan menskalakannya mengikut faktor tertentu:

var img = new Image();
img.src = ...;
img.onload = function() {

    // Define scaling factor
    var scale = 8;

    // Create an off-screen canvas to hold the source image
    var src_canvas = document.createElement('canvas');
    src_canvas.width = this.width;
    src_canvas.height = this.height;

    // Draw the source image to the off-screen canvas
    var src_ctx = src_canvas.getContext('2d');
    src_ctx.drawImage(this, 0, 0);

    // Get pixel data from the source canvas
    var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;

    // Create an on-screen canvas to display the scaled image
    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');

    // Copy pixels from the source canvas to the on-screen canvas while scaling
    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);
        }
    }
};

Kaedah ini menyediakan penskalaan sempurna piksel dan mengekalkan tepi asli imej yang jelas.

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!