5

I've seen some questions about this here already but none of them provide a good answer.

What I need is a javascript (or perhaps some kind of a plugin using PHP/Apache) that can find the colors in an image and replace them with the closest color from a custom palette, in my case the NES palette. How can this be done?

Richard B
  • 395
  • 1
  • 3
  • 13
  • It looks like you're going to have to manipulate the image data directly. See: http://stackoverflow.com/questions/7785072/modulate-colors-with-drawimage-on-html5-canvas and http://stackoverflow.com/questions/667045/getpixel-from-html-canvas – Diodeus - James MacFarlane Jun 04 '12 at 13:39
  • Is this what you are looking for http://stackoverflow.com/questions/3914203/javascript-filter-image-color – Swarne27 Jun 04 '12 at 14:22
  • Have you looked into the `CANVAS` tag and `imageData` API? – rxgx Jun 05 '12 at 03:03
  • You can use ImageMagick through JavaScript to replace the image's palette - this is the quickest and cleanest way, but will some work! – Lee Goddard Mar 17 '21 at 10:48

1 Answers1

2

Yes, it can be done using javascript, by following these steps :

  1. load the image into a canvas
  2. get the imagedata (which is an array of rgba values for each pixel)
  3. loop through the array and convert the rgba values to hex values
  4. convert the resulting color to the nearest color in the pallette
  5. convert the new colors back to rgba values
  6. restore the new imagedata array to the canvas
gion_13
  • 41,171
  • 10
  • 96
  • 108