How to work with CMYK colors in jQuery.colorpicker?

StackOverflow https://stackoverflow.com/questions/20382977

سؤال

I would like to use the nice jQuery colorpicker (https://github.com/vanderlee/colorpicker) with CMYK colors.

To get the cmyk values from the dialog I use

 colorFormat: ['EXACT', 'cp;mp;yp;kp'],

That results in something like this

 0;68.157958984375;68.157958984375;20.1904296875

But when I open the colorpicker dialog again, the color is not determined.

It seems that the EXACT pattern is not used for reading.

You can test this with:

<!DOCTYPE html>
<html><head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="colorpicker/jquery.colorpicker.js"></script>
 <link type="text/css" rel="stylesheet" href="colorpicker/jquery.colorpicker.css"></link>
</head>
<body>
<input type="text" class="cp-full" value="0;83.782958984375;83.782958984375;4.736328125" style="width:350px" />
<script>
$(function() {
    $('.cp-full').colorpicker({
        parts: ['map', 'bar', 'hex', 'rgb', 'alpha', 'cmyk', 'preview' ],
        showOn: 'both',
        colorFormat: ['EXACT', 'cp;mp;yp;kp'],

        init: function(event, color) {
            console.log(color);
        },      
    });
});
</script>
</body>

So, how can I do that?

(I had a look at the object whent init is fired, but i assume that is to late. Maybe there is an earlier event to split the values from the field.)

هل كانت مفيدة؟

المحلول

The plugin's documentation don't states a way to do custom reading, checking the code you can see that both parsers CMYK and CMYK percent expects the format cmyk(value, value, value, value). But with the following "hack" (add the open event to read the input value and update the control color) you can circunvent the problem and show the previously selected color every time you click the control: 

<!DOCTYPE html>
<html><head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="colorpicker/jquery.colorpicker.js"></script>
 <link type="text/css" rel="stylesheet" href="colorpicker/jquery.colorpicker.css"></link>
</head>
<body>
<input type="hidden" id="cp-hidden-input" value=""/>
<input type="text" class="cp-full" value="0,83.782958984375,83.782958984375,4.736328125" style="width:350px" />
<script type="text/javascript">
$(function() {
    $('.cp-full').colorpicker({
        parts: ['map', 'bar', 'hex', 'rgb', 'alpha', 'cmyk', 'preview' ],
        showOn: 'both',
        colorFormat: ['EXACT', 'cp,mp,yp,kp'],
        open: function(event, color) {
            var v = $(this).val();
            // Use either ',' or ';' as separator
            var separator = v.indexOf(',') != -1 ? ',' : ';';
            var cmyk = v.split(separator);
            color.colorPicker.color.setCMYK(cmyk[0] / 100.0, cmyk[1] / 100.0, cmyk[2] / 100.0, cmyk[3] / 100.0);
        },
    });
});
</script>
</body>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top