当前位置：首页 > JavaScript

js实现水墨特效

2026-04-07 09:40:47JavaScript

水墨特效实现方法

使用JavaScript实现水墨效果可以通过Canvas 2D或WebGL结合图像处理算法完成。以下是几种常见的技术路径：

基于Canvas的图像处理

使用Canvas的getImageData和putImageDataAPI对像素进行修改：

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

img.onload = function() {
  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 * 0.8;  // R
    data[i + 1] = avg * 0.6;  // G
    data[i + 2] = avg * 0.4;  // B
  }

  // 边缘检测增强
  edgeDetection(data, canvas.width, canvas.height);

  ctx.putImageData(imageData, 0, 0);
};
img.src = 'input.jpg';

function edgeDetection(data, width, height) {
  // Sobel算子等边缘检测算法实现
}

使用滤镜组合

通过CSS滤镜和Canvas混合模式模拟效果：

const style = document.createElement('style');
style.textContent = `
  .ink-wash {
    filter: grayscale(100%) contrast(120%) brightness(90%) sepia(20%);
    mix-blend-mode: multiply;
  }
`;
document.head.appendChild(style);

WebGL实现方案

使用Three.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({ alpha: true });

// 加载水墨纹理
const textureLoader = new THREE.TextureLoader();
const material = new THREE.ShaderMaterial({
  uniforms: {
    uTexture: { value: textureLoader.load('paper.jpg') },
    uInkTexture: { value: textureLoader.load('ink.png') }
  },
  vertexShader: `...`, // 自定义着色器代码
  fragmentShader: `...` // 包含水墨扩散算法
});

第三方库推荐

OpenCV.js：提供成熟的图像处理算法

cv.cvtColor(srcMat, dstMat, cv.COLOR_RGBA2GRAY);
cv.adaptiveThreshold(dstMat, dstMat, 255, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 11, 2);

p5.js：简化创意编程

js实现水墨特效

function setup() {
  createCanvas(800, 600);
  loadImage('landscape.jpg', img => {
    image(img, 0, 0);
    filter(GRAY);
    filter(BLUR, 1);
  });
}