如何在没有服务器的情况下保存在画布上应用 CSS 滤镜的图像？

在没有后端的画布上保存应用了 CSS 滤镜的图像

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

转换为画布并提取图像数据

1. 使用以下命令将图像转换为画布document.getElementById("myCanvas").getContext("2d").drawImage(image, 0, 0, canvas.width, canvas.height);.
2. 使用 myCanvas 使用应用的过滤器提取图像数据。 toDataURL("image/png").

应用 CSS 过滤器Context

但是，如果不支持上下文过滤属性，则图像将被保存为无效果。要解决此问题：

1. 使用 typeof ctx.filter === "undefined" 检查 context.filter 属性是否存在。
2. 如果支持，请使用 ctx 应用 CSS 过滤器。在将图像绘制到画布之前，filter = "filterValue"。
3. 如果不支持，请使用未显示的替代方法手动应用过滤器这里。

示例

此示例使用 filter 属性将棕褐色滤镜应用于图像。如果不支持，它将使用后备（未显示）。

var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "//i.imgur.com/WblO1jx.jpg";

function draw() {
  var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d");

  canvas.width = this.width;
  canvas.height = this.height;

  // filter
  if (typeof ctx.filter === "undefined") {
    ctx.filter = "sepia(0.8)";
    ctx.drawImage(this, 0, 0);
  } else {
    ctx.drawImage(this, 0, 0);
    // TODO: manually apply filter here.
  }

  document.querySelector("img").src = canvas.toDataURL();
}

请记住，CSS 过滤器仅适用于元素的外观，而不适用于实际的位图数据。要应用实际的滤镜，如果滤镜属性不可用，请在像素级别使用位图。

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