Wie speichere ich Bilder mit CSS-Filtern, die mit clientseitigem Canvas angewendet werden?

So speichern Sie Bilder aus der Leinwand mit CSS-Filtern

Einführung

Das Anwenden von CSS-Filtern auf Bilder auf der Clientseite kann deren visuelle Attraktivität verbessern. Das direkte Speichern dieser gefilterten Bilder kann jedoch ohne Verwendung eines serverseitigen Backends eine Herausforderung sein.

Schritt-für-Schritt-Prozess

1. Erstellen Sie den Canvas-Kontext:

• Erstellen Sie ein Canvas-Element myCanvas und seinen 2D-Rendering-Kontext ctx.

2. Zeichnen Sie das Originalbild:

• Zeichnen Sie das Originalbild (Bild1) mit ctx.drawImage() auf die Leinwand.

3. CSS-Filter anwenden:

• Berechnen und verketten Sie CSS-Filter basierend auf Benutzereingaben oder -präferenzen.
• Setzen Sie den Filter mit $('#myCanvas').css auf die Leinwand ('filter', filterVal), um die kombinierten CSS-Filter anzuwenden.

4. Erhalten Sie die gefilterten Bilddaten:

• Verwenden Sie myCanvas.toDataURL("image/png"), um die Canvas-Bitmap in eine Daten-URL umzuwandeln, die das gefilterte Bild darstellt.

5. Speichern oder zeigen Sie das gefilterte Bild an:

• Speichern Sie die Daten-URL im lokalen Speicher oder verwenden Sie document.location.href = data, um das gefilterte Bild in einem neuen Tab oder Fenster anzuzeigen.

Häufige Probleme und Lösungen

Problem:Bild wird ohne gespeichert Filter.

Lösung: Überprüfen Sie, ob die Eigenschaft ctx.filter vorhanden ist. Falls unterstützt, wenden Sie den CSS-Filter direkt auf den Kontext an. Wenn nicht verfügbar, stellen Sie einen Fallback bereit, um Filter manuell anzuwenden.

Browserkompatibilität

Die Eigenschaft ctx.filter ist nicht Teil der offiziellen HTML Canvas 2D-Spezifikation, aber in Firefox und anderen unterstützenden Browsern verfügbar . Einige Filter werden möglicherweise auch nicht von allen Browsern unterstützt. Weitere Informationen finden Sie in der neuesten Dokumentation zur Browserkompatibilität.

Beispiel

Der folgende Codeausschnitt veranschaulicht den Vorgang:

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

Das obige ist der detaillierte Inhalt vonWie speichere ich Bilder mit CSS-Filtern, die mit clientseitigem Canvas angewendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!