在 JavaScript 中复制 PHP ImageMagick 的 paintOpaqueImage 函数

Question

ImageMagick 有一个功能，允许您扫描图片并替换所有大致为您指定颜色的颜色，并将这些颜色替换为您指定的另一种颜色。

我有兴趣使用 JavaScript 复制此功能。也就是说，我想应用一个图像过滤器，例如将每一种近似红色的颜色更改为黑色。这怎么可能？

旁注：我测试了一个 GitHub 项目，该项目以某种方式设法使用网络工作者克隆 ImageMagick 的功能。可悲的是，它太慢了（需要 5.632 秒才能从本地服务器加载带有我想要的滤镜的图像……我正在尝试应用滤镜两次）。虽然很酷 - https://github.com/manuels/unix-toolbox.js-imagemagick.

Answer 1

我写了一个又快又脏的 WebGL code mostly copied from https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL and http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html。

更改颜色发生在 html 文件第 14 行的顶点着色器中。

<script id="shader-fs" type="x-shader/x-fragment">
    varying highp vec2 vTextureCoord;

    uniform sampler2D uSampler;

    uniform highp vec4 uOrigColor;
    uniform highp vec4 uDestColor;

    void main(void) {
        highp vec4 orig = texture2D(uSampler, vTextureCoord);
        highp vec4 dest = orig;
        highp float gap = 0.05; // threshold
        if (orig.r > uOrigColor.r - gap && orig.r < uOrigColor.r + gap
            && orig.g > uOrigColor.g - gap && orig.g < uOrigColor.g + gap 
            && orig.b > uOrigColor.b - gap && orig.b < uOrigColor.b + gap) {
            dest = uDestColor;
        }
        gl_FragColor = dest;
    }
</script>

测试：http://jsfiddle.net/ryubro/0f3oaqae/1/

在 JavaScript 中复制 PHP ImageMagick 的 paintOpaqueImage 函数

Replicate PHP ImageMagick's paintOpaqueImage Function in JavaScript

javascript

image

imagemagick