Wie kann ich Bilder von einer Leinwand mit angewendeten CSS-Filtern speichern?

Bilder von der Leinwand mit CSS-Filtern speichern

Sie haben CSS-Filter auf ein Bild angewendet, aber wenn Sie versuchen, es zu speichern, wird das Das Originalbild bleibt ohne Effekte erhalten. Um dieses Problem zu lösen, gibt es zwei Hauptansätze:

1. Kontextfiltereigenschaft verwenden (nur Firefox)

Firefox unterstützt die Kontextfiltereigenschaft, mit der Sie CSS-Filter direkt auf den Canvas-Kontext anwenden können:

var ctx = myCanvas.getContext('2d');
ctx.filter = "grayscale(50%) blur(5px)";
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);

Dadurch wird der Filter angewendet und speichert dann die Leinwand als Bild.

2. Filter manuell anwenden (alle Browser)

Obwohl die Kontextfiltereigenschaft nicht allgemein unterstützt wird, können Sie mithilfe von Vorgängen auf Pixelebene manuell Filter auf die Leinwand anwenden. Dies erfordert die Verwendung des Filter Effects Module Level 1 und der SVG-Filter- und Farbmatrix-Spezifikationen:

// Calculate filter matrix for grayscale
var greyMatrix = [
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0, 0, 0, 1, 0
];

// Apply grayscale filter to canvas
var imgData = ctx.getImageData(0, 0, myCanvas.width, myCanvas.height);
for (var i = 0; i < imgData.data.length; i += 4) {
  var r = imgData.data[i];
  var g = imgData.data[i + 1];
  var b = imgData.data[i + 2];
  imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] = (r * greyMatrix[0] + g * greyMatrix[1] + b * greyMatrix[2]);
}
ctx.putImageData(imgData, 0, 0);

Sie würden diesen Vorgang für jeden Filter wiederholen, den Sie anwenden möchten.

Denken Sie daran, diese Ansätze auch verlassen sich auf eine Firefox-spezifische Eigenschaft oder erfordern eine manuelle Filtermanipulation. Wenn eine umfassende Browserunterstützung von entscheidender Bedeutung ist, sollten Sie die Entwicklung einer Backend-Lösung in Betracht ziehen.

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