Wie kann ich ein Bild mit auf die Leinwand angewendeten CSS-Filtern ohne Server speichern?

Speichern eines Bildes mit angewendeten CSS-Filtern auf der Leinwand ohne Backend

Um ein Bild mit angewendeten CSS-Filtern auf der Clientseite zu speichern, führen Sie die folgenden Schritte aus:

In Leinwand konvertieren und Bilddaten extrahieren

1. Konvertieren Sie das Bild in eine Leinwand mit document.getElementById("myCanvas").getContext("2d").drawImage(image, 0, 0, canvas.width, canvas.height);.
2. Extrahieren Sie die Bilddaten mit angewendeten Filtern mit myCanvas. toDataURL("image/png").

CSS-Filter auf Kontext anwenden

Allerdings Das Bild wird ohne Effekte gespeichert, wenn die Kontextfiltereigenschaft nicht unterstützt wird. Um dieses Problem zu beheben:

1. Überprüfen Sie die Existenz der context.filter-Eigenschaft mit typeof ctx.filter === "undefiniert".
2. Wenn unterstützt, wenden Sie CSS-Filter mit ctx an. filter = "filterValue", bevor Sie das Bild auf die Leinwand zeichnen.
3. Wenn dies nicht unterstützt wird, wenden Sie Filter manuell mit einer alternativen Methode an, die nicht angezeigt wird hier.

Beispiel

In diesem Beispiel wird mithilfe der Filtereigenschaft ein Sepiafilter auf ein Bild angewendet. Wenn dies nicht unterstützt wird, wird ein Fallback verwendet (nicht angezeigt).

var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "//i.imgur.com/WblO1jx.jpg";

function draw() {
  var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d");

  canvas.width = this.width;
  canvas.height = this.height;

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

Denken Sie daran, dass CSS-Filter nur auf das Erscheinungsbild der Elemente angewendet werden, nicht auf die tatsächlichen Bitmap-Daten. Um tatsächliche Filter anzuwenden, arbeiten Sie mit der Bitmap auf Pixelebene, wenn die Filtereigenschaft nicht verfügbar ist.

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