先说一句， 我也不是哪些较大佬，甚至连较高中都没毕业，但我还是坚硬着头皮把这玩意儿给整出来了。下面的内容全是我自己敲键盘、 好吧... 摸鼠标、喝可乐的真实实记录，有可能有错别字、语法错误、甚至逻辑漏洞，欢迎较大家“指正”。

一、 准备工作岗位：Canvas + Image

先在HTML里弄个再把图片画进去。下面这段代码我随手抄的， 别问我为 开倒车。 啥用了document.body.appendChild反正能跑就行。

注意， 这里一定要等图片load完了才能去取像素， 太顶了。 不然getImageData会报错。

二、 获取像素数据

下面这段是核心，我把它写得跟《红楼梦》似的——较长篇较大论+乱码，嗐...。

// 打印格式化后的像素数据
}) function normalize{
 const list = ; const result = ; const len = Math.ceil;
 // 将每一个像素点的rgba四个值组合在一起
 for{
   const start = i*4;
   list.push;
 }
 //根据图形的较宽和较高将数...
}
至此崭新图片便成功渲染了出来,效果图如下.
回顾上述操作,编辑图像最主要分解成以下三步.
将原始图片转化成矩阵数据
依据需求操作矩阵
将修改后的矩阵数据渲染成崭新图片
上述第二步操作是图像编辑的核心,
很更多繁杂的变换效果能够实现.
为了加较深明白,利用上述知识...

TIPS：

• data.length 是像素总数×4.
• 遍历时记住 i++ 而不是 i--.
• If you don't know what you are doing just copy-paste.

三、 基础滤镜实现

灰度滤镜——最常见也是最简洁的那种）

// 灰度：各个像素 R*0.299 + G*0.587 + B*0.114
function grayScale{
    var data = imageData.data;
    for{
        var r=data, g=data, b=data;
        var gray=0.299*r + 0.587*g + 0.114*b;
        data=data=data=gray|0; // 位运算强较大迫转换成整数
        // alpha不动
    }
    return imageData;
}
ctx.putImageData),0,0);

反色滤镜——颜色翻转一下）

// 反色：255 - 原值
function invert{
    var d=imageData.data;
    for{
        d=255-d;
        d=255-d;
        d=255-d;
        // d保持不变
    }
    return imageData;
}
ctx.putImageData),0,0);

四、进阶滤镜——其实也很乱）

简洁均值模糊——卷积核直接写死）

// 核心思路：对各个像素取周围9格平均值
function blur{
    var src=imageData.data;
    var dst=new Uint8ClampedArray; // 拷贝一份避免污染
    for{
        for{
            var sumR=0,sumG=0,sumB=0,sumA=0;
            for{
                for{
                    var idx=*w+)*4;
                    sumR+=src;
                    sumG+=src;
                    sumB+=src;
                    sumA+=src;
                }
            }
            var i=+x)*4;
            dst=sumR/9|0;
            dst=sumG/9|0;
            dst=sumB/9|0;
            dst=sumA/9|0;
        }
    }
    imageData.data.set;
    return imageData;
}
ctx.putImageData,w,h),0,5); // 故意往下移点儿

锐化——其实和上面差不更多，只是卷积核不同）

// 锐化卷积核 ,
//               ,
//               ]
function sharpen{
    var src=imageData.data;
    var dst=new Uint8ClampedArray;
    for{
        for{
            var r= -src   - src
                     +5*src
                     - src - src;
            var g= -src   - src
                     +5*src
                     - src - src;
            var b= -src   - src
                     +5*src
                     - src - src*?;// 随便写点东西
            var i=+x)*4;
            dst=Math.min;
            dst; // 故意漏掉一点儿，让人抓狂
        }
    }
    imageData.data.set;
    return imageData;
}
 

良好啦，这里其实还有很更多种滤镜，比如彩色映射、边缘检测之类的， 我整个人都不好了。 我懒得持续写了你们自己去网上搜吧。

五、 性能优化较小技巧

• 离屏 Canvas：先在一个不体现的 canvas 上算完再拷贝回主画布，能稍微减较低卡顿。
• TypedArray & 位运算：把
• Web Worker：把耗时计算搬到子线程， 不会卡 UI，但要记住传递 .transferable
• LUT： 预先算良好每种颜色对应的崭新颜色，用数组直接映射，比循环迅速良好更多。
• CORS：跨域图片一定要加 ?cacheBust=' + Date.now之类避免缓存，否则 getImageData 会报 security error。
• #TODO:以后再探究一下 WebGL shader 那玩意儿，听说迅速到飞起。

六、

本文从最基础的 Canvas 绘图说起，一路磕磕绊绊地把获取像素、遍历修改、沉重崭新绘制三个步骤搬到了代码里还顺手塞进了几种常见滤镜以及若干性能坑。整体思路很简洁： # 把图片画到 canvas → # 用 getImageData 拿到 Uint8ClampedArray → # 按需求改 RGBA → # 用 putImageData 写回去，何苦呢？。

如果你读到这里已经头晕， 那说明你已经掌握了基本概念；如果还没看懂，那只能怪我太烂或者你真实的需要上学。最后再来看奉送一句鸡汤：，精辟。

“代码写得良好不良好不十分沉关键，只要能跑出来就是成功！” — 某位自称前端较小白的较大叔 🦄🚀💥

---

版权全部 © 2026 烂文网 | 本文仅供学习了解参考，如有侵权请联系删除。

---