js简单图片特效代码

JavaScript 可以用来创建各种简单的图片特效。以下是一个使用 JavaScript 和 HTML5 Canvas 来实现图片模糊效果的示例代码：

基础概念

Canvas API：HTML5 中的一个元素，允许通过 JavaScript 在网页上进行图形绘制。
图像处理：使用算法改变图像的视觉效果，如模糊、锐化、灰度化等。

优势

实时性：可以在用户浏览器中实时应用特效，无需服务器处理。
交互性：用户可以与特效进行交互，如调整模糊程度。
轻量级：相比服务器端处理，客户端处理更节省资源。

类型

模糊效果：使图像看起来更加柔和。
锐化效果：增强图像边缘的清晰度。
灰度效果：将彩色图像转换为黑白图像。

应用场景

社交媒体滤镜：为用户提供美化照片的工具。
游戏界面：增强游戏的视觉效果。
数据可视化：使图表和图形更加吸引人。

示例代码

以下是一个简单的图片模糊效果的实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片模糊效果</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>

<canvas id="myCanvas" width="500" height="500"></canvas>
<input type="range" id="blurAmount" min="0" max="10" value="0">
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = 'path_to_your_image.jpg'; // 替换为你的图片路径
  img.onload = function() {
    drawImageWithBlur(0);
  };

  document.getElementById('blurAmount').addEventListener('input', function(e) {
    drawImageWithBlur(parseInt(e.target.value));
  });

  function drawImageWithBlur(blurAmount) {
    ctx.filter = `blur(${blurAmount}px)`;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  }
</script>

</body>
</html>

解释

HTML部分：创建一个canvas元素和一个范围输入（range input），用于调整模糊程度。
JavaScript部分：
- 加载图片并在图片加载完成后调用drawImageWithBlur函数。
- drawImageWithBlur函数设置canvas的filter属性为模糊效果，并绘制图片。
- 监听范围输入的变化，实时更新模糊效果。