在JavaScript中複製PHP ImageMagick的paintOpaqueImage函數

ImageMagick有一個函數，允許您掃描圖片並替換所有大致爲您指定顏色的顏色，並用您指定的另一種顏色替換這些顏色。在JavaScript中複製PHP ImageMagick的paintOpaqueImage函數

我很感興趣使用JavaScript來複制此功能。也就是說，我想應用一個圖像過濾器，例如，將每個近似紅色的顏色改變爲黑色。這將如何成爲可能？

備註：我測試了一個GitHub項目，該項目以某種方式設法使用Web工作人員克隆ImageMagick的功能。可悲的是，它太慢了（需要5.632秒來從本地服務器加載我想要的過濾器的圖像..我試圖將過濾器應用兩次）。這很酷 - https://github.com/manuels/unix-toolbox.js-imagemagick。

來源

2015-10-15 user2476265

可以與讀取每個像素的RGB值[CanvasRenderingContext2D.getImageData（）]（https://developer.mozilla.org/en-US/docs/Web/API/ CanvasRenderingContext2D/getImageData）並使用[CanvasRenderingContext2D.putImageData（）]（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData）編寫。我曾經用它們進行過一種圖像變形演示，但速度非常令人失望。也許，WebGL可以成爲答案。我發現了一個名爲[WebGL Filter]的鼓舞人心的項目（http://evanw.github.io/webgl-filter/），儘管它沒有涵蓋你正在尋找的內容。 – ryubro

謝謝..應該很有趣，看看 – user2476265

我寫了一個快速和骯髒的WebGL code主要複製從https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL和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/

來源

2015-10-16 07:43:20 ryubro

這是野獸......我怎麼能感謝你？你的比特幣地址是什麼？ – user2476265

謝謝！因爲幾周前我學習了openGL，所以我自我激勵。您的投票，接受和讚賞對我來說已經足夠了。：） – ryubro

那麼我從上面複製腳本後如何使用它？說我有一個id =「thisimage」的圖像，我想改變＃000000到#FFFFFF – user2476265

在JavaScript中複製PHP ImageMagick的paintOpaqueImage函數

回答

相關問題