如何使用应用的 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中文网其他相关文章！