Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer: 2024-11-03 13:25:03
original
218 Les gens l'ont consulté

How to Stretch Images Without Antialiasing in the Browser?

É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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal