Wie speichere ich Bilder mit CSS-Filtern, die von einer Leinwand aus angewendet werden?

Bilder mit CSS-Filtern von Canvas speichern

Herausforderung

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

1. Verwenden Sie CSS-Filter, um das Bild zu verbessern.
2. Konvertieren Sie das Bild in eine Leinwand element.
3. Versuchen Sie, das Bild mit var data = myCanvas.toDataURL("image/png"); zu speichern.

Diese Methode führt jedoch häufig dazu, dass das Bild ohne gespeichert wird Angewendete Filter.

Verstehen des Problems

CSS-Filter werden auf das Element selbst angewendet, aber Canvas-Elemente stellen Bitmaps dar sind von CSS nicht betroffen. Ohne die Filtereigenschaft des Kontexts besteht die einzige Möglichkeit darin, die Filter manuell auf die Bildpixel anzuwenden.

Lösung

Wenn die Filtereigenschaft des Kontexts verfügbar ist (in den meisten modernen Browsern unterstützt), können Sie dies tun Wenden Sie den Filter direkt an:

var ctx = myCanvas.getContext('2d');

var filterVal = "grayscale("+ grayValue +"%)" + " " + "blur("+ blurValue +"px)" + " " + "brightness("+brightnessValue+"%)" + " " + "saturate(" + saturateValue +"%)" + " " + "contrast(" + contrastValue + "%)" + " " + "sepia(" + sepiaValue + "%)" ;
ctx.filter = filterVal;

Wenn die Filtereigenschaft nicht verfügbar ist, müssen Sie die Filtereffekte manuell auf Pixelebene implementieren. Weitere Informationen finden Sie im Filter Effects Module Level 1 und in SVG Filters and Color Matrix.

Codebeispiel

Dieses Beispiel zeigt, wie Sie einen Filter mithilfe der Filtereigenschaft des Kontexts anwenden:

// Create an image object
var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "path/to/image.jpg";

function draw() {
  // Get the canvas and its context
  var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d");

  // Resize the canvas to match the image
  canvas.width = this.width;
  canvas.height = this.height;

  // Apply the filter using the `filter` property
  ctx.filter = "sepia(0.8)";

  // Draw the image onto the canvas
  ctx.drawImage(this, 0, 0);

  // Convert the canvas to a data URL
  var data = canvas.toDataURL("image/png");

  // Set the `src` attribute of an image element to the data URL
  document.querySelector("img").src = data;
}

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