Wie kann ich ein Bild mit angewendeten clientseitigen CSS-Filtern ohne Backend speichern?

Bilder mit clientseitig angewendeten CSS-Filtern speichern

Problem:

Wie Können Sie ein Bild speichern, nachdem Sie CSS-Filter auf der Clientseite ohne verwendet haben? Backend?

Hintergrund:

Viele Entwickler stoßen auf Probleme, wenn sie ein Bild mit clientseitig angewendeten CSS-Filtern speichern. Trotz der Befolgung eines typischen Arbeitsablaufs aus Anwenden von Filtern, Konvertieren in Leinwand und Speichern mit toDataURL fehlen dem Ergebnis oft die beabsichtigten Effekte.

Lösung:

Der Schlüssel zur Lösung Dieses Problem liegt in der Verwendung der Filtereigenschaft des Kontextobjekts, die es Ihnen ermöglicht, CSS-Filter direkt auf die Bitmap anzuwenden. Diese Eigenschaft ist noch kein offizieller Teil des Webstandards, hat aber in jüngster Zeit breitere Unterstützung gefunden.

Implementierung:

Hier ist eine prägnante Implementierung, die die Filtereigenschaft enthält :

// 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
}

Zusätzlich Kontext:

• CSS und DOM arbeiten getrennt von Canvas-Bitmaps. CSS-Filter wirken sich auf Elemente (die Anzeigeportale zu Bitmaps) aus, nicht auf die Bitmaps selbst.
• Das manuelle Anwenden von Filtern auf Bilder erfordert eine Manipulation auf Pixelebene, wenn die Filtereigenschaft nicht vorhanden ist.

• Ressourcen für Filterberechnungen:

  • Filter Effects Module Level 1
  • SVG-Filter und Farbe Matrix

Beispiel:

In diesem Beispiel wird ein Sepiafilter auf ein Bild auf der Leinwand angewendet und das Ergebnis als Bild extrahiert:

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

Das obige ist der detaillierte Inhalt vonWie kann ich ein Bild mit angewendeten clientseitigen CSS-Filtern ohne Backend speichern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!