How To Change The Color Of A Pill

A Demo (meet note about this demo below): http://jsfiddle.net/m1erickson/2d7ZN/

You lot tin go an array containing the image's RGBA pixel information using context.getImageData

          var imageData=context.getImageData(0,0,canvass.width,canvas.height);  var data=imageData.information;                  

From there you tin can read (and optionally change) the colour of each pixel.

The rgba array is laid out like this:

          // pinnacle-left pixel (x:0,y:0)  information[0]   red of pixel#0 (0-255) data[1]   light-green of pixel#0 (0-255) data[2]   blue of pixel#0 (0-255) data[three]   alpha of pixel#0 (opacity: 0-255)  // next pixel (x:1,y:0)  data[4]   red of pixel#1 data[v]   light-green of pixel#1 data[6]   blueish of pixel#i information[vii]   blastoff of pixel#1                  

Yous can change the R,Chiliad,B or A component of any pixel by changing the data array

For example, this changes the meridian left pixel to solid cerise

          information[0]=255;   // red data[1]=0;     // greenish data[2]=0;     // blue data[3]=255;   // alpha (opacity)                  

About transparency:

The blastoff component of each pixel determines that pixel's transparency. If you only want to modify by and large opaque pixels then you can easily ignore all the semi-transparent pixels like this:

          // alpha is 0-255 // ignore pixels with alpha < 200 (ignore all pixels that are mostly semi-transparent)  if( data[3]<200 ) { // don't process this pixel }                  

Finally, you can push your modified pixels back to the sail with .putImageData

          context.putImageData(imageData,0,0);                  

Annotation almost the Demo

It's difficult to "recolor" an image using the canvas'southward default RGBA color scheme.

And then this demo converts the RGB data to the HSL color scheme. This allows the "color" (hue) to be inverse without affecting the other components of the pixel (Due south=saturation of the color, L=lightness of the color).

After the pixel is recolored, that modified HSL information is converted back to RGBA and saved to the data array.

Source: https://stackoverflow.com/questions/23830471/convert-image-color-without-changing-its-transparent-background

Posted by: quinnoloplath.blogspot.com

Share this post