当前位置：首页 > JavaScript

js实现影像

2026-04-06 15:14:10JavaScript

影像处理基础方法

使用JavaScript处理影像通常涉及Canvas API或WebGL。Canvas适合2D图像操作，WebGL适合高性能3D或复杂滤镜。

Canvas基础操作
创建Canvas元素并加载图像：

js实现影像

<canvas id="canvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = 'image.jpg';
  img.onload = () => ctx.drawImage(img, 0, 0, 500, 500);
</script>

像素级操作
通过getImageData获取像素数据并修改：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
  data[i] = 255 - data[i];     // 红色通道反相
  data[i + 1] = 255 - data[i + 1]; // 绿色通道反相
}
ctx.putImageData(imageData, 0, 0);

使用开源库简化操作

1. Fabric.js
适用于交互式图像编辑：

js实现影像

import { fabric } from 'fabric';
const canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('image.jpg', img => {
  img.filters.push(new fabric.Image.filters.Grayscale());
  img.applyFilters();
  canvas.add(img);
});

2. OpenCV.js
通过Emscripten编译的OpenCV库：

const src = cv.imread('canvas');
const dst = new cv.Mat();
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
cv.imshow('canvas', dst);
src.delete(); dst.delete();

WebGL高级处理

使用GLSL着色器实现滤镜：

const gl = canvas.getContext('webgl');
const vertexShaderSource = `...`; // 顶点着色器代码
const fragmentShaderSource = `...`; // 片段着色器代码
// 编译着色器并创建程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);