Comparaison entre imageOpenPolygon () et schéma de traitement d'image côté navigateur

Dans le développement Web moderne, le traitement d'image est un lien très courant mais pas négligé. Qu'il s'agisse de générer des vignettes, de traitement du filigrane ou de recadrage d'images et de dessiner des polygones, les développeurs ont souvent besoin de traiter des images sur le serveur ou de remettre certaines tâches de traitement au navigateur à terminer. Parmi eux, PHP fournit des fonctions de traitement d'images riches, telles que ImageOpenPolygon () , et l'API Canvas de HTML5 rend également le traitement d'image côté navigateur puissant et flexible. Alors, quels sont les avantages et les inconvénients des deux? Comment devriez-vous choisir dans votre projet? Cet article l'analysera en détail pour vous.

Quelle est la fonction ImageOpenPolygon ()?

Dans PHP, la fonction ImageOpenPolygon () est utilisée pour dessiner un polygone ouvert sur une ressource d'image (c'est-à-dire que le dernier point ne sera pas connecté au premier point). Les exemples de son utilisation de base sont les suivants:

 <?php
// Créer une image vierge
$image = imagecreatetruecolor(400, 300);

// Attribuer des couleurs
$white = imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

// Remplir l&#39;arrière-plan
imagefill($image, 0, 0, $white);

// Définissez le point d&#39;un polygone
$points = [
    50,  50,  // Point 1 (x,y)
    200, 50,  // Point 2 (x,y)
    200, 200, // Point 3 (x,y)
    50,  200, // Point 4 (x,y)
];

// Dessiner des polygones ouverts
imageopenpolygon($image, $points, 4, $red);

// Image de sortie
header('Content-Type: image/png');
imagepng($image);

// Mémoire libre
imagedestroy($image);
?>

Si vous souhaitez enregistrer l'image traitée sur le serveur et fournir un téléchargement ou un affichage, modifiez simplement la pièce de sortie pour enregistrer:

 imagepng($image, '/var/www/m66.net/images/polygon.png');

De cette façon, l'utilisateur peut accéder à l'image générée par, par exemple, https://m66.net/images/polygon.png .

Avantages et inconvénients du serveur ImageOpenPolygon ()

avantage

• Stabilité élevée : traitement côté serveur, résultats contrôlables et non affecté par l'environnement client.

• Bonne compatibilité : cela n'a rien à voir avec l'appareil de l'utilisateur, et même les appareils bas de gamme ou les navigateurs plus anciens peuvent obtenir des résultats de traitement normalement.

• Bonne sécurité : la vérification unifiée de l'autorisation et la vérification du format peuvent être effectuées sur la couche de serveur pour éviter les risques potentiels.

• Prend en charge le traitement par lots à grande échelle : adapté au traitement de grands nombres d'images ou de logique complexe.

défaut

• Pression élevée du serveur : si le nombre de visites est important et que les demandes de génération d'images sont fréquentes, elle augmentera considérablement la charge sur le processeur et la mémoire du serveur.

• Haute latence : l'utilisateur attend que le serveur traite l'image à chaque fois qu'il demande, ce qui affecte la vitesse de réponse.

• Évolutivité limitée : il est nécessaire d'élargir spécifiquement les ressources matérielles du serveur ou d'utiliser des mécanismes CDN et de cache pour soulager le stress.

Avantages et inconvénients de la solution de traitement d'image sur toile sur le navigateur

Grâce à l'API HTML5 Canvas, les développeurs frontaux peuvent implémenter directement le dessin d'image dans le navigateur de l'utilisateur, tels que le dessin d'un polygone ouvert en utilisant le code suivant:

 <canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Définir les points de polygone
const points = [
    {x: 50, y: 50},
    {x: 200, y: 50},
    {x: 200, y: 200},
    {x: 50, y: 200},
];

// Dessiner des polygones ouverts
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for(let i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
}
ctx.strokeStyle = "red";
ctx.stroke();
</script>

avantage

• Réduire la pression du serveur : le traitement d'image est effectué par le client et le serveur n'a besoin que de fournir le matériau d'origine.

• Réponse rapide : les opérations utilisateur sont instantanément rétroactées sans attendre la génération de serveurs.

• Interactivité forte : il peut facilement implémenter des fonctions telles que la traînée, la mise à l'échelle et l'édition dynamique.

• Bonne expérience utilisateur : il convient particulièrement aux applications qui nécessitent beaucoup d'interaction frontale, comme le dessin en ligne et l'éditeur d'image.

défaut

• Problèmes de compatibilité : très peu de vieux navigateurs peuvent ne pas prendre en charge la toile ou il existe des différences (bien que les navigateurs modernes soient fondamentalement sans obstruction).

• Défi de sécurité : les données traitées par les clients sont sujettes à la falsification, et une attention particulière doit être accordée à la protection sensible des données.

• Dispositifs dépendants des performances : le traitement des grandes images sur des dispositifs à basse performance peut provoquer le bégaiement du navigateur ou même le plantage.

Comment choisir?

Si votre site Web, par exemple, https://m66.net , est une plate-forme de partage d'images et que les utilisateurs ont des exigences élevées pour la vitesse de fonctionnement, alors effectuer un traitement préliminaire sur le frontal, puis le téléchargement du résultat final sur le serveur sera une solution plus efficace. S'il s'agit d'un système d'arrière-plan qui nécessite une précision extrêmement élevée et une normalisation du traitement d'image, le traitement ImageOpenPolygon () côté serveur sera plus approprié.

Résumer

Chaque méthode de traitement d'image a ses scénarios applicables, et il n'y a pas d'avantages et d'inconvénients absolus. Les projets idéaux doivent être considérés de manière approfondie en fonction des besoins de l'entreprise, des performances du serveur et des conditions d'équipement utilisateur. Ce n'est qu'en allouant raisonnablement les tâches de traitement d'image entre le serveur et le client que nous pouvons créer des applications Web efficaces et stables.