image - Replicate PHP ImageMagick's paintOpaqueImage Function in JavaScript -


imagemagick has function allows scan through picture , replace colors color specify , replace these colors color specify.

i'm interested in replicating functionality using javascript. is, apply image filter changes every color approximately red black, instance. how possible?

side note: tested out github project somehow manages clone imagemagick's functionality using web workers. sadly, slow (takes 5.632 seconds load image filter want local server.. , i'm trying apply filter twice). it's pretty cool though - https://github.com/manuels/unix-toolbox.js-imagemagick.

i wrote quick , dirty webgl code copied 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.

changing color happens in vertex shader line 14 in html file.

<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> 

to test: http://jsfiddle.net/ryubro/0f3oaqae/1/


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -