当前位置：首页 > JavaScript

js实现图片特效

2026-02-02 15:06:22JavaScript

使用Canvas实现图片滤镜效果

Canvas API提供了强大的像素操作能力，可以轻松实现各种图片滤镜效果。通过获取图片的像素数据，对每个像素的RGB值进行数学运算。

const canvas = document.createElement('canvas');
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);

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 灰度滤镜
  for(let i = 0; i < data.length; i += 4) {
    const avg = (data[i] + data[i+1] + data[i+2]) / 3;
    data[i] = avg;     // R
    data[i+1] = avg;   // G
    data[i+2] = avg;   // B
  }

  ctx.putImageData(imageData, 0, 0);
  document.body.appendChild(canvas);
};

img.src = 'image.jpg';

CSS滤镜实现视觉特效

CSS filter属性提供了一系列预定义滤镜效果，无需JavaScript即可实现常见特效。

js实现图片特效

.image-effect {
  filter: 
    blur(2px) 
    contrast(150%) 
    sepia(50%);
  transition: filter 0.3s ease;
}

.image-effect:hover {
  filter: 
    blur(0) 
    contrast(100%) 
    sepia(0);
}

WebGL实现高级3D效果

Three.js等WebGL库可以实现更复杂的3D图片特效，包括变形、粒子化等高级效果。

js实现图片特效

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const texture = new THREE.TextureLoader().load('image.jpg');
const geometry = new THREE.PlaneGeometry(5, 5);
const material = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  plane.rotation.x += 0.01;
  plane.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

SVG滤镜实现矢量特效

SVG滤镜适用于矢量图形和图像，可以创建独特的视觉效果如发光、阴影等。

<svg width="0" height="0">
  <filter id="glow-effect">
    <feGaussianBlur stdDeviation="3" result="blur"/>
    <feComposite in="SourceGraphic" in2="blur" operator="over"/>
  </filter>
</svg>

<img src="image.jpg" style="filter: url(#glow-effect)"/>

使用CSS混合模式

CSS mix-blend-mode属性可以创建图层混合效果，实现色彩叠加等创意效果。

.image-container {
  position: relative;
  width: 500px;
  height: 500px;
}

.base-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  mix-blend-mode: multiply;
  opacity: 0.7;
}