Comment puis-je enregistrer une image avec des filtres CSS côté client appliqués sans backend ?

Enregistrement des images avec des filtres CSS appliqués côté client

Problème :

Comment pouvez-vous enregistrer une image après avoir utilisé des filtres CSS côté client sans backend ?

Contexte :

De nombreux développeurs rencontrent des problèmes lors de l'enregistrement d'une image avec des filtres CSS appliqués côté client. Malgré le suivi d'un flux de travail typique consistant à appliquer des filtres, à convertir en canevas et à enregistrer avec toDataURL, le résultat n'a souvent pas les effets escomptés.

Solution :

La clé pour résoudre ce problème réside dans l'utilisation de la propriété filter de l'objet contextuel, qui permet d'appliquer des filtres CSS directement au bitmap. Cette propriété ne fait pas encore officiellement partie du standard Web, mais a bénéficié d'un soutien plus large ces derniers temps.

Implémentation :

Voici une implémentation concise qui intègre la propriété filter :

// Check if the filter property exists
if (typeof ctx.filter !== "undefined") {
  // Apply the desired CSS filter
  ctx.filter = "sepia(0.8)";
  // Draw the image onto the canvas with the applied filter
  ctx.drawImage(this, 0, 0);
} else {
  // Fallback approach (not shown) for browsers without the filter property
}

Supplémentaire Contexte :

• CSS et DOM fonctionnent séparément des bitmaps de canevas. Les filtres CSS affectent les éléments (les portails d'affichage des bitmaps), et non les bitmaps eux-mêmes.
• L'application manuelle de filtres aux images nécessite une manipulation au niveau des pixels en l'absence de la propriété filter.

• Ressources pour les calculs de filtres :

  • Module d'effets de filtre niveau 1
  • SVG Filtres et matrice de couleurs

Exemple :

Cet exemple applique un filtre sépia à une image sur le canevas et extrait le résultat comme une image :

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    img = new Image();

img.crossOrigin = "";
img.onload = draw;
img.src = "//i.imgur.com/WblO1jx.jpg";

function draw() {
  canvas.width = this.width;
  canvas.height = this.height;

  if (typeof ctx.filter !== "undefined") {
    ctx.filter = "sepia(0.8)";
    ctx.drawImage(this, 0, 0);
  } else {
    ctx.drawImage(this, 0, 0);
    // TODO: Manually apply filter here.
  }

  document.querySelector("img").src = canvas.toDataURL();
}

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!