Comment étirer des images sans anticrénelage dans un navigateur ?

Étendre les images sans anticrénelage dans le navigateur

Dans le domaine du pixel art, étirer les images à des tailles plus grandes tout en préservant leurs bords nets peut être une tâche ardue. défi. Les algorithmes de mise à l'échelle introduisent souvent un anticrénelage indésirable, brouillant les lignes nettes et compromettant l'esthétique souhaitée.

Pour résoudre ce problème, plusieurs méthodes ont été explorées, notamment :

Techniques CSS

Les premières tentatives utilisant CSS, JavaScript et HTML se sont révélées inefficaces, entraînant des images floues en raison de l'anticrénelage. Cependant, une nouvelle propriété CSS est apparue comme une solution :

image-rendering: pixelated;

Cette propriété désactive l'anticrénelage, donnant aux images une apparence nette et pixellisée. Il fonctionne bien dans les navigateurs modernes tels que Chrome, Firefox et même IE7-8.

Approche Canvas

Pour les navigateurs sans prise en charge du rendu d'image, une approche plus complexe Une approche utilisant l'API Canvas peut être utilisée. Voici un extrait de code JavaScript qui copie les pixels de l'image source et les met à l'échelle selon un facteur spécifié :

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);
        }
    }
};

Cette méthode fournit une mise à l'échelle parfaite au pixel près et conserve les bords nets d'origine de l'image.

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!