Canvas 图片滤镜，创意美图简单做！

前端

2023-10-22 03:55:43

Canvas 图片滤镜，创意美图简单做！

随着互联网的发展，图片越来越成为我们日常生活中必不可少的一部分。无论是社交媒体上的分享，还是电子商务网站上的产品展示，图片都能帮助我们更好地传达信息。然而，有时候我们可能对图片的效果不满意，想要添加一些滤镜效果来让图片更加出彩。

Canvas 是 HTML5 中的一个非常重要的元素，它可以让我们在网页上绘制图形。利用 Canvas，我们可以轻松地实现图片滤镜功能。在本文中，我们将介绍如何使用 Canvas 来实现图片滤镜效果。

一、准备工作

在开始之前，我们需要先准备一些东西。

一个 HTML 文件
一个 CSS 文件
一个 JavaScript 文件
一张图片

二、HTML 代码

首先，我们需要创建一个 HTML 文件。在这个文件中，我们将包含 CSS 文件和 JavaScript 文件。此外，我们还需要创建两个 Canvas 元素，一个用来显示原始图片，另一个用来显示滤镜后的图片。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <canvas id="original-image"></canvas>
  <canvas id="filtered-image"></canvas>
</body>
</html>

三、CSS 代码

接下来，我们需要创建一个 CSS 文件。在这个文件中，我们将定义两个 Canvas 元素的样式。

canvas {
  width: 500px;
  height: 500px;
}

#original-image {
  margin-right: 10px;
}

四、JavaScript 代码

最后，我们需要创建一个 JavaScript 文件。在这个文件中，我们将编写代码来实现图片滤镜功能。

const originalImage = document.getElementById('original-image');
const filteredImage = document.getElementById('filtered-image');

const originalImageCtx = originalImage.getContext('2d');
const filteredImageCtx = filteredImage.getContext('2d');

// 加载图片
const image = new Image();
image.onload = function() {
  // 绘制原始图片
  originalImageCtx.drawImage(image, 0, 0);

  // 应用滤镜
  filteredImageCtx.drawImage(image, 0, 0);
  filteredImageCtx.filter = 'grayscale(1)';
};
image.src = 'image.jpg';