likes
comments
collection
share

图片加滤镜竟然如此简单 ✨

作者站长头像
站长
· 阅读数 68

你是否曾经想要给你的照片增添一些特殊效果，让它们更加引人注目？或者你是否对那些充满艺术感的滤镜照片羡慕不已，但却认为它们需要专业的图像处理技巧？今天，我将向你揭示一个令人惊讶的事实——图片加滤镜竟如此简单！

滤镜是一种强大而又简单的工具，它可以改变图片的色彩、亮度、对比度和纹理等特性，让你的照片脱颖而出。只需几行 CSS 代码，你就能轻松地为你的图片应用绚丽多彩的效果。在本文中，我将向你展示如何使用 CSS 滤镜属性为你的图片增添滋味。让我们一起揭开图片加滤镜的神秘面纱，发掘那些隐藏在简单代码背后的惊艳效果。让你的照片焕发新生，让你的创造力在滤镜的魔力下绽放！让我们开始吧！

1. 阴影效果

首先，让我们谈谈如何为图片添加阴影效果。通过 CSS 的 box-shadow 属性，你可以为图片创建引人注目的阴影效果。通过调整阴影的颜色、模糊程度和偏移量，你可以获得不同的效果。

下面是一个示例代码，展示了如何为一张图片添加阴影效果：

.image-with-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

通过将 box-shadow 属性应用于图片元素的 CSS 类，你可以将阴影效果应用于图片。在上面的示例中，我们使用了一个偏移量为 0、模糊程度为 4 像素、颜色为半透明黑色的阴影。你可以根据需要调整这些值来创建适合你的图片的阴影效果。

2. 色相旋转

如果你想要改变图片的整体色调，可以使用 CSS 的 hue-rotate 滤镜属性。通过旋转图片的色相通道，你可以改变图片的颜色。

下面是一个示例代码，展示了如何使用 hue-rotate 滤镜属性为图片应用色相旋转效果：

.image-with-hue-rotate {
  filter: hue-rotate(90deg);
}

在上述示例中，我们将图片的色相通道顺时针旋转了 90 度。这将导致图片的颜色整体向色轮上的下一个颜色移动。你可以根据喜好和需要调整旋转的角度，创造出各种各样的效果。

3. 褐色调（Sepia）效果

褐色调效果可以让你的图片看起来像老式的照片，给人一种复古的感觉。通过 CSS 的 sepia 滤镜属性，你可以为图片添加褐色调效果。

下面是一个示例代码，展示了如何使用 sepia 滤镜属性为图片应用褐色调效果：

.image-with-sepia {
  filter: sepia(1);
}

在上述示例中，我们将图片的褐色调效果设置为最大程度（值为 1）。这将使图片完全转换为褐色调，看起来像一张古老的照片。你可以尝试不同的值来调整褐色调的强度，以达到你想要的效果。

4. 亮度 (Brightness)

亮度滤镜通过调整图像的亮度来改变其明亮度级别。这可以让图像看起来更明亮或更暗。你可以使用 brightness() 函数来应用亮度滤镜。

.filter-example {
  filter: brightness(1.5);
}

上述示例将图像的亮度增加到原始亮度的 1.5 倍。你可以使用小于 1 的值来降低亮度。

5. 对比度 (Contrast)

对比度滤镜调整图像的对比度，即图像中颜色之间的差异程度。较高的对比度可以使图像中的颜色更加鲜明和清晰。使用 contrast() 函数可以应用对比度滤镜。

.filter-example {
  filter: contrast(1.2);
}

上述示例将图像的对比度增加到原始对比度的 1.2 倍。你可以使用小于 1 的值来降低对比度。

6. 饱和度 (Saturate)

饱和度滤镜可以调整图像的颜色饱和度，即颜色的鲜艳程度。较高的饱和度可以使颜色更加鲜艳，而较低的饱和度则使颜色变得更柔和。你可以使用 saturate() 函数来应用饱和度滤镜。

.filter-example {
  filter: saturate(2);
}

上述示例将图像的饱和度增加到原始饱和度的 2 倍。你可以使用小于 1 的值来降低饱和度。

7. 模糊 (Blur)

模糊滤镜可以让图像看起来更加柔和和模糊。你可以使用 blur() 函数来应用模糊滤镜。

.filter-example {
  filter: blur(5px);
}

上述示例将图像模糊化，模糊半径为 5 像素。你可以调整模糊半径的值来获得不同程度的模糊效果。

8. 透明度 (Opacity)

透明度滤镜可以通过调整图像的透明度来改变其不透明度水平。你可以使用 opacity() 函数来应用透明度滤镜。

.filter-example {
  filter: opacity(0.7);
}

上述示例将图像的透明度设置为原始透明度的 0.7 倍。你可以使用介于 0 到 1 之间的值来调整透明度。

这些是一些常用的滤镜效果，它们可以单独应用，也可以组合在一起以创建更复杂的图像效果。通过调整这些滤镜的参数和组合方式，你可以创造出各种独特的视觉效果，为你的图片赋予个性和艺术感。

图片加滤镜竟然如此简单 ✨

保存加滤镜的图片

要将经过滤镜处理的图片保存下来，你可以使用 JavaScript 来完成该任务。下面是一个示例代码，展示了如何通过 Canvas 元素和 toBlob() 方法将经过滤镜处理的图片保存为本地文件：

// 假设已经有一个经过滤镜处理的图片元素
const filteredImage = document.querySelector("#origin-image");
filteredImage.crossOrigin = "anonymous"; // This enables CORS
// 创建一个新的 Canvas 元素
var canvas = document.createElement("canvas");
canvas.width = filteredImage.width;
canvas.height = filteredImage.height;

// 在 Canvas 上绘制经过滤镜处理的图片
var context = canvas.getContext("2d");
context.filter = window.getComputedStyle(filteredImage).filter; // 设置与原图相同的滤镜效果
context.drawImage(
  filteredImage,
  0,
  0,
  filteredImage.width,
  filteredImage.height
);
try {
  canvas.toBlob((blob) => {
    let url = URL.createObjectURL(blob);
    let a = document.createElement("a");
    let event = new MouseEvent("click");
    a.download = "default.png";
    a.href = url;
    a.dispatchEvent(event);
    URL.revokeObjectURL(url);
  });
} catch (error) {
  console.log(error);
}

在上述代码中，我们首先创建一个新的 Canvas 元素，并将其尺寸设置为经过滤镜处理的图片的尺寸。然后，我们使用 getContext('2d') 获取绘图上下文，并将滤镜效果设置为与原图相同的滤镜效果。接下来，我们使用 drawImage() 方法将经过滤镜处理的图片绘制到 Canvas 上。

最后，我们使用 toBlob() 将 Canvas 转换为 base64 编码的 PNG 图像数据。然后，我们创建一个下载链接 a 元素，将图像数据作为链接的 href 属性，并设置 download 属性来指定文件的名称。最后，通过模拟点击下载链接，浏览器将开始下载经过滤镜处理的图片。

具体代码示例如下：

codesandbox.io/s/vigilant-…

总结

  1. 通过对图片添加 box-shadow 和 filter 的 CSS 属性来调整图片的阴影和滤镜
  2. 通过组合这些属性来创作出丰富多彩的照片效果
  3. 通过 JavaScript 程序对创作后的图片进行下载

希望你享受本文带来的灵感和启发。图片加滤镜的魅力就在于它们能够以简单的方式提升你的照片的吸引力和艺术感。尽情发挥你的创造力，创造出属于你自己的独特滤镜效果吧！

转载自:https://juejin.cn/post/7238065836342575162
评论
请登录