5

I have a problem:

Browsers do not support showing images in CMYK mode and the client see some really sharp and different colors in his uploaded image while the colors is alright.

solve this problem i think its a good idea to convert an CMYK image to a RGB mode image in client-side with using JavaScript language.

based on my search result about converting image in CMYK to RGB mode with using JavaScript, required image to be imported to a canvas and makes every color number in each pixel convert CMYK to RGB color number with using like this library ColorConverter and finally i have a canvas with RGB mode

this what i am thinking, now my question is if this solution is right ? and if there is any better way to do the job ? please give me your ideas.

Amin Rezazade
  • 51
  • 1
  • 3
  • That is about the best way to do it if you need it done client side though I would question why not do the conversion just once on the server? – Blindman67 Jun 05 '16 at 13:04

1 Answers1

7

Browsers do not support showing images in CMYK mode

Showing CMYK images correctly wouldn't be possible as it is relative to the output device, and converting for simulated preview would need a locally calibrated and accurate ICC profile (or at least a high quality approximated profile if accuracy is not required).

You could simply convert each CMYK pixel into RGB, however, since RGB has a wider gamut than CMYK you might end up with a very bright looking result.

In my opinion the better approach is to implement a conversion setup at server side when uploading using ImageMagick or similar software which can take into account ICC profiles. This will allow you to keep the original CMYK file for download/print and a converted and approximated RGB version for preview purposes (you could f.ex. allow client to upload their output ICC for accurate preview).

In any case, the formula to convert CMYK data directly to RGB is:

var C, M, Y, K;   // initialize with normalized values

Then

var r = 255 * (1 - C) * (1 - K);
var g = 255 * (1 - M) * (1 - K);
var b = 255 * (1 - Y) * (1 - K);

The alpha channel is set to fully opaque.

  • K3N do you have any tips for how to convert CMYK to RGB using a profile, say ISO Coated v2 300%? I'm only looking to convert one color at a time (not an image) so I can afford a somewhat expensive operation. Any help would be greatly appreciated! – sambecker May 31 '17 at 01:44
  • 1
    @sambecker not besides using a ICC/LUT. Though, you could try to pre-calculate a raw 3D LUT (ICC is technically a LUT too, but) using this particular profile (an option to that is to use approximation curve profiles, small size but more calculations). The file will likely become rather large depending on where you want to interpolate and there will always be a small overhead due to the vast amount of possible combinations. No easy way around :/ I think there is work in progress for APIs for color-space management in the browser, but if we ever see that it will probably be a while from now. –  Jun 29 '17 at 18:51
  • can you point me in the right direction for an ICC/LUT? I can handle the conversion on the backend if that's helpful. I'd love to know what these guys are doing: http://www.codecrete.net/CMYK. They seem to make the calculation on the server, w/ a profile, and then send an AJAX response to the browser. – sambecker Jun 30 '17 at 00:10
  • does your response apply to this post as well? https://stackoverflow.com/questions/44730949/convert-an-rgb-color-into-cmyk-using-a-color-profile-like-iso-v2-coated – sambecker Jun 30 '17 at 21:50