17370845950

CSS filter 不支持鱼眼变形，因其仅支持逐像素线性变换，而鱼眼需极坐标重映射；必须用 Canvas 2D 手动采样或 WebGL 着色器实现。

HTML5 本身不提供内置的“鱼眼变形”滤镜，filter CSS 属性也不支持鱼眼（fisheye）这类非线性几何变换；必须用 Canvas 2D 手动实现像素映射，或借助 WebGL（如 Three.js + 自定义着色器）。

为什么 CSS fi

lter 做不了鱼眼

CSS filter（如 blur()、hue-rotate()）只支持线性/全局效果，所有变换都是逐像素独立计算、不改变坐标关系。鱼眼本质是极坐标重映射：中心区域放大、边缘剧烈压缩，需读取原图不同位置的像素并写入新坐标 —— 这超出了 CSS 滤镜能力范围。

• filter: url(#fisheye) 不生效，因为 SVG 滤镜也**不支持自定义几何扭曲**（ 只能做微小位移，无法实现大范围重采样）
• 试图用 transform: scale() + border-radius 模拟？只是圆角裁剪+缩放，不是真实鱼眼投影
• 浏览器尚未支持 filter: fisheye() 这类提案（目前无标准）

Canvas 2D 实现鱼眼的核心步骤

在 上绘制源图像后，遍历目标画布每个像素，反向计算它在原图中对应的坐标（极坐标转换），再用 getImageData/putImageData 或 drawImage 采样。

• 把目标像素 (x, y) 转为以画布中心为原点的相对坐标 (dx, dy)
• 计算极径 r = Math.sqrt(dx*dx + dy*dy) 和极角 theta = Math.atan2(dy, dx)
• 应用鱼眼公式（例如简单模型：rOut = r * r / R，其中 R 是最大半径），得到新极径
• 转回直角坐标：srcX = cx + rOut * Math.cos(theta)，srcY = cy + rOut * Math.sin(theta)
• 用双线性插值（或直接取整）从原图采样，写入目标像素

注意：getImageData 会触发跨域错误，确保图片已设置 crossOrigin="anonymous"。

WebGL 方案更高效但门槛高

用 WebGL 把图像传为纹理，在片元着色器里直接做极坐标变换，GPU 并行处理，1080p 图像也能实时渲染。Three.js 可简化流程：

• 创建 ShaderMaterial，顶点着色器保持四边形不变，片元着色器写鱼眼逻辑
• 关键变量：用 vUv（归一化 UV）转为极坐标，再套用 rOut = pow(r, 0.5) 等非线性函数模拟鱼眼
• 避免 texture2D 采样越界，加 if (r > 1.0) discard;
• 比 Canvas 快 5–10 倍，但需处理着色器编译错误、精度限制（mediump 下 pow 易出错）

现成库推荐与取舍

别从零写 —— 用成熟方案省时间：

• glfx.js：轻量级 WebGL 滤镜库，含 fisheye 效果，调用只需 ctx.fisheye(0.5)（参数控制强度）
• pixi.js + pixi-filters：支持鱼眼，适合游戏/动效场景，但包体积较大
• opencv.js：有 cv.remap() 可做任意映射，但启动慢、内存占用高，仅适合离线处理

移动端要注意：iOS Safari 对 WebGL 纹理尺寸有限制（常截断到 2048×2048），鱼眼变形后边缘拉伸易出现马赛克，得预缩放原图或手动分块处理。