Bolehkah Kami Meregangkan Imej dalam Pelayar Tanpa Antialiasing?

Meregangkan Imej Tanpa Antialiasing dalam Penyemak Imbas

Meningkatkan seni piksel selalunya melibatkan regangan imej untuk membesarkan piksel individu. Walau bagaimanapun, teknik tradisional seperti CSS dan JavaScript biasanya memperkenalkan pengaburan yang tidak diingini (antiliasing). Artikel ini menjawab persoalan sama ada mungkin untuk meregangkan imej dalam penyemak imbas tanpa antialiasing.

Walaupun penerokaan menggunakan CSS, JavaScript dan HTML, pengarang pada mulanya menemui percubaan yang tidak berjaya disebabkan oleh antialiasing. Teknik CSS seperti pemaparan imej: crisp-edges terbukti berkesan dalam penyemak imbas moden tetapi tidak konsisten dan tidak disokong dalam Internet Explorer 9 dan versi terdahulu.

Penyelesaian yang dibentangkan melibatkan penggunaan elemen kanvas untuk memanipulasi piksel data imej mengikut piksel. Kanvas sumber menerima imej asal dan kanvas destinasi dicipta untuk menskala dan melukis piksel individu.

<code class="javascript">var img = new Image();
img.src = ...;
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>

Kaedah ini menyediakan penyelesaian untuk isu antialiasing, membolehkan penskalaan sempurna piksel tanpa sebarang kabur. Walau bagaimanapun, perlu diingat bahawa sokongan untuk sifat pemaparan imej mungkin berbeza-beza merentas penyemak imbas dan versi.

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