Comment étirer les images sans anticrénelage dans le navigateur ?

Étendre des images sans anticrénelage dans le navigateur

L'étirement des images sans anticrénelage est un défi courant auquel sont confrontés les développeurs Web, en particulier lorsqu'il s'agit de pixel art. . Traditionnellement, des méthodes telles que CSS, JavaScript et HTML sont utilisées pour étirer les images, mais elles introduisent souvent un flou indésirable dû à l'anticrénelage.

CSS et navigateurs modernes

Les versions récentes de Chrome et Firefox ont introduit une nouvelle propriété CSS appelée rendu d'image. En définissant cette propriété sur pixelisé, il est possible de désactiver l'anticrénelage lors de l'étirement des images. Cependant, cette méthode n'est pas encore fiable, car Chrome et FF ont cessé de la prendre en charge.

Solution basée sur Canvas

L'API Canvas fournit une solution pour étirer les images sans anticrénelage. Le code ci-dessous montre comment créer une image mise à l'échelle sur un canevas :

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

Ce code copie les données de pixels d'une image source vers un canevas de destination mis à l'échelle, étirant efficacement l'image sans anticrénelage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!