Comment enregistrer des images avec des filtres CSS appliqués à l'aide du canevas côté client ?

Comment enregistrer une image de Canvas avec des filtres CSS

Introduction

L'application de filtres CSS aux images côté client peut améliorer leur attrait visuel. Cependant, enregistrer directement ces images filtrées peut être difficile sans utiliser un backend côté serveur.

Processus étape par étape

1. Créer le contexte du canevas :

• Créez un élément de canevas myCanvas et son contexte de rendu 2D ctx.

2. Dessinez l'image originale :

• Dessinez l'image originale (image1) sur la toile à l'aide de ctx.drawImage().

3. Appliquer des filtres CSS :

• Calculez et concaténez des filtres CSS en fonction des entrées ou des préférences de l'utilisateur.
• Définissez le filtre sur le canevas à l'aide de $('#myCanvas').css ("filter", filterVal) pour appliquer les filtres CSS combinés.

4. Obtenez les données d'image filtrées :

• Utilisez myCanvas.toDataURL("image/png") pour convertir le bitmap du canevas en une URL de données représentant l'image filtrée.

5. Enregistrez ou affichez l'image filtrée :

• Stockez l'URL des données dans le stockage local ou utilisez document.location.href = data pour afficher l'image filtrée dans un nouvel onglet ou une nouvelle fenêtre.

Problèmes courants et solutions

Problème : L'image est enregistrée sans aucun filters.

Solution : Vérifiez l'existence de la propriété ctx.filter. S'il est pris en charge, appliquez le filtre CSS directement au contexte. Si elle n'est pas disponible, fournissez une solution de secours pour appliquer manuellement les filtres.

Compatibilité avec les navigateurs

La propriété ctx.filter ne fait pas partie de la spécification officielle HTML Canvas 2D mais est disponible dans Firefox et d'autres navigateurs pris en charge. . Certains filtres peuvent également ne pas être pris en charge par tous les navigateurs. Reportez-vous à la dernière documentation sur la compatibilité du navigateur pour plus de détails.

Exemple

L'extrait de code suivant illustre le processus :

var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d"),
    img = document.getElementById("image1");

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

var filterVal = "grayscale(0.5) blur(5px) brightness(110%)";

if (typeof ctx.filter !== "undefined") {
  ctx.filter = filterVal;
  ctx.drawImage(img, 0, 0);
} else {
  // TODO: Manually apply filters
}

var data = canvas.toDataURL("image/png");
localStorage.setItem("filteredImage", data);

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!