如何保存在画布上应用 CSS 滤镜的图像？

使用 Canvas 中的 CSS 滤镜保存图像

挑战

要在客户端应用 CSS 滤镜后保存图像，请按照以下步骤操作：

1. 使用 CSS 滤镜增强图像。
2. 将图像转换为画布元素。
3. 尝试使用 var data = myCanvas.toDataURL( 保存图像) "image/png");.

但是，此方法通常会导致在不应用滤镜的情况下保存图像。

理解问题

CSS 滤镜是应用于元素本身，但 canvas 元素表示不受 CSS 影响的位图。如果没有上下文的过滤器属性，唯一的选择就是手动将过滤器应用于图像像素。

解决方案

如果上下文的过滤器属性可用（大多数现代浏览器都支持），您可以直接应用滤镜：

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

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

如果滤镜属性不可用，则需要手动实现像素级别的滤镜效果。请参阅滤镜效果模块级别 1 和 SVG 滤镜和颜色矩阵以获取指导。

代码示例

此示例演示如何使用上下文的滤镜属性应用滤镜：

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

以上是如何保存在画布上应用 CSS 滤镜的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！