js实现扫描图片效果

实现图片扫描效果的JavaScript方法

使用JavaScript实现图片扫描效果可以通过CSS动画、Canvas绘图或WebGL技术完成。以下是几种常见的方法：

CSS动画实现扫描线效果

通过CSS的animation和::after伪元素创建动态扫描线：

.scan-effect {
  position: relative;
  overflow: hidden;
}

.scan-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(0, 255, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
  animation: scan 3s linear infinite;
}

@keyframes scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(100vh); }
}

Canvas实现高级扫描效果

使用Canvas绘制更复杂的扫描效果，包括像素化处理和动态光栅：

const canvas = document.getElementById('scanCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;

  // 绘制原始图像
  ctx.drawImage(img, 0, 0);

  // 创建扫描效果
  function drawScanLine() {
    const scanY = (Date.now() / 50) % canvas.height;

    // 保存当前状态
    ctx.save();

    // 创建扫描线区域
    ctx.beginPath();
    ctx.rect(0, scanY - 10, canvas.width, 20);
    ctx.clip();

    // 增强扫描区域的亮度
    ctx.filter = 'brightness(1.5)';
    ctx.drawImage(img, 0, 0);

    // 绘制扫描线
    ctx.strokeStyle = 'rgba(0, 255, 0, 0.7)';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, scanY);
    ctx.lineTo(canvas.width, scanY);
    ctx.stroke();

    ctx.restore();

    requestAnimationFrame(drawScanLine);
  }

  drawScanLine();
};

img.src = 'your-image.jpg';

WebGL实现高性能扫描效果

对于更复杂的视觉效果，可以使用WebGL：

// 初始化WebGL上下文
const gl = canvas.getContext('webgl');

// 创建着色器程序
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 0, 1);
  }
`);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
  precision highp float;
  uniform sampler2D texture;
  uniform float time;
  varying vec2 vUV;

  void main() {
    vec2 uv = vUV;
    float scanLine = sin(uv.y * 500.0 + time * 5.0) * 0.05;
    vec3 color = texture2D(texture, uv).rgb;
    color += scanLine;
    gl_FragColor = vec4(color, 1.0);
  }
`);
gl.compileShader(fragmentShader);

// 创建并链接程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 设置纹理和渲染循环
// ... (需要完整的WebGL设置代码)

实现要点说明

1. 性能考虑：CSS动画性能最佳，适合简单效果；Canvas提供更多控制；WebGL适合复杂高性能需求。

2. 视觉效果增强：

   • 添加发光效果增强扫描线：box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
   • 使用混合模式：ctx.globalCompositeOperation = 'lighter';
   • 添加噪点效果模拟老式显示器

3. 交互控制：

   let scanSpeed = 3;
   document.addEventListener('mousemove', (e) => {
     scanSpeed = 10 - (e.clientY / window.innerHeight) * 8;
   });

4. 响应式调整：

   

   window.addEventListener('resize', () => {
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
   });

以上方法可根据具体需求选择或组合使用，CSS方案最简单，Canvas方案最灵活，WebGL方案性能最高。