如何使用應用的 CSS 濾鏡保存畫布中的圖像？

使用CSS 濾鏡從畫布儲存影像

您已將CSS 濾鏡套用到影像，但當您嘗試儲存它時，原始影像被保留，沒有任何效果。為了解決這個問題，有兩種主要方法：

1。利用上下文過濾器屬性（僅限Firefox）

Firefox 支援上下文過濾器屬性，它允許您直接將CSS 過濾器應用到畫布上下文：

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

這將套用濾鏡然後將畫布另存為圖像。

2.手動應用過濾器（所有瀏覽器）

儘管上下文過濾器屬性未得到廣泛支持，但您可以使用像素級操作手動將過濾器應用到畫布。這需要使用濾鏡效果模組等級 1 以及 SVG 濾鏡和顏色矩陣規格：

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

您將為要套用的每個濾鏡重複此程序。

請記住，這些方法或依賴 Firefox 特定的屬性或需要手動過濾器操作。如果廣泛的瀏覽器支援至關重要，請考慮開發後端解決方案。

以上是如何使用應用的 CSS 濾鏡保存畫布中的圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！