JS 照片波普艺术滤镜

使用 JSManipulate 实现的 PopArt 滤镜效果。

网址，Github

在其官网示例中，并没有提供 PopArt 滤镜的使用范例。

主要原理是：

1. 定义9组颜色，每组3种色值，对应最终效果中每一个小图的3种颜色；
2. 针对原图进行9次 PopArt 滤镜；
3. 然后将 imageData 按顺序放置在 ctx 中；
4. 对 ctx 应用 blur 滤镜；

颜色值可以利用 PopArtStudio 中提供的 Andy Warhol / Che 在线预览来获取。

const COLORS = [['ff0000', '...', '...'], ...];

/*
 * data 源图数据
 * ctx1 最终的九宫格
 * ctx2 用来绘制每一个小图
 */
for(let i = 0; i < 9; i ++) {
    ctx2.restore();
    
    ctx2.drawImage(data, 0, 0, 200, 200);
    
    let td = ctx2.getImageData(0, 0, 200, 200);
    let px = 10 + (i % 3) * (200 + 10);
    let py = 10 + Math.floor(i / 3) * (200 + 10);
    
    JSManipulate.popArt.filter(td, {
        threshold: 85,
        colors: COLORS[i]
    });
    
    ctx1.putImageData(td, px, py);
}