如何将RGB或HEX转换为CMYK

Question

我将选择器小部件https://iro.js.org/用于应用程序。这个想法是当用户选择一种颜色时，rgb，hex和cmyk应该显示在屏幕上。 库没有显示cmyk的功能。

我尝试使用此代码http://www.javascripter.net/faq/rgb2cmyk.htm

这是我的代码https://codepen.io/Danica1986/pen/yLBGrQY?editors=1010

function openColor(evt, colorName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("color");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(colorName).style.display = "flex";
  evt.currentTarget.className += " active";
}

var colorPicker = new iro.ColorPicker("#color-picker-container", {

  width: 200,
  color: "rgb(255, 0, 0)",
  borderWidth: 1,
  borderColor: "#fff",
});

let colorHEX = document.getElementById("color-hex");
let colorRGB = document.getElementById("color-rgb");
let valuesHEX = document.getElementById("values-hex");
let valuesRGB = document.getElementById("values-rgb");
let colorText = document.querySelectorAll('.change-placeholder p');
let colorBtn = document.querySelectorAll('.change-placeholder button');


function showMessage() {
  //Show message in alert()
  textbox = document.getElementById('textbox').value;
  alert(textbox);
}
colorPicker.on(["color:init", "color:change"], function(color) {
  colorHEX.style.backgroundColor = color.hexString;
  valuesHEX.value = color.hexString;
  colorRGB.style.backgroundColor = color.hexString;
  valuesRGB.value = color.rgbString;
  console.log(color.hexString)

  for (let i = 0; i < colorText.length; i++) {
    colorText[i].style.color = color.rgbString;
  }
  for (let i = 0; i < colorBtn.length; i++) {
    colorBtn[i].style.backgroundColor = color.rgbString;
  }

});

<script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
<div class="color-scheme-container">
  <div id="color-scheme-content">

    <ul class="color-types">
      <li class=" tablink active" onclick="openColor(event,'Hex')">HEX
      </li>
      <li class="tablink" onclick="openColor(event,'Rgb')">RGB</li>
      <li class="tablink" onclick="openColor(event,'Cmyk')">CMYK</li>
    </ul>

    <div id="Hex" class="color">

      <div id="color-hex"></div>
      <input type="text" id="values-hex">
      <!-- <div id="values-hex"></div> -->
      <button type="button" onclick="onColorChange()">Update</button>
    </div>
    <!--hex-->
    <div id="Rgb" class="color" style="display:none">

      <div id="color-rgb"></div>
      <input type="text" id="values-rgb">
      <div id="values-rgb"></div>
      <button>Update</button>
    </div>
    <!--rgb-->

    <div id="Cmyk" class="color" style="display:none">
      <div id="color-cmyk"></div>
      <div id="values-cmyk"> "cmyk(100%, 0%, 0%, 0%"</div>
      <button>Update</button>

    </div>
    <!--cmyk-->
    <!--color-scheme-content-->
    <div id="color-picker-container"></div>
  </div>
  <!--olor-scheme-content-->
</div>

Answer 1

检查此代码

function openColor(evt, colorName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("color");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(colorName).style.display = "flex";
  evt.currentTarget.className += " active";
}


function rgb2cmyk (r,g,b) {
 var computedC = 0;
 var computedM = 0;
 var computedY = 0;
 var computedK = 0;

 //remove spaces from input RGB values, convert to int
 var r = parseInt( (''+r).replace(/\s/g,''),10 ); 
 var g = parseInt( (''+g).replace(/\s/g,''),10 ); 
 var b = parseInt( (''+b).replace(/\s/g,''),10 ); 

 if ( r==null || g==null || b==null ||
     isNaN(r) || isNaN(g)|| isNaN(b) )
 {
   console.log ('Please enter numeric RGB values!');
   return;
 }
 if (r<0 || g<0 || b<0 || r>255 || g>255 || b>255) {
   console.log ('RGB values must be in the range 0 to 255.');
   return;
 }

 // BLACK
 if (r==0 && g==0 && b==0) {
  computedK = 1;
  return [0,0,0,1];
 }

 computedC = 1 - (r/255);
 computedM = 1 - (g/255);
 computedY = 1 - (b/255);

 var minCMY = Math.min(computedC,
              Math.min(computedM,computedY));
 computedC = Math.round((computedC - minCMY) / (1 - minCMY) * 100) ;
 computedM = Math.round((computedM - minCMY) / (1 - minCMY) * 100) ;
 computedY = Math.round((computedY - minCMY) / (1 - minCMY) * 100 );
 computedK = Math.round(minCMY * 100);

 return {c: computedC,m: computedM,y: computedY,k: computedK};
}



var colorPicker = new iro.ColorPicker("#color-picker-container", {

  width: 200,
  color: "rgb(255, 0, 0)",
  borderWidth: 1,
  borderColor: "#fff",
});

let colorHEX = document.getElementById("color-hex");
let colorRGB = document.getElementById("color-rgb");
let valuesHEX = document.getElementById("values-hex");
let valuesRGB = document.getElementById("values-rgb");
let colorText = document.querySelectorAll('.change-placeholder p');
let colorBtn = document.querySelectorAll('.change-placeholder button');
let colorCMYK = document.getElementById("color-cmyk");
let valuesCMYK = document.getElementById("values-cmyk");

function showMessage() { 
    //Show message in alert()
    textbox = document.getElementById('textbox').value;
    alert(textbox);
}
colorPicker.on(["color:init", "color:change"], function (color) {
  colorHEX.style.backgroundColor = color.hexString;
  valuesHEX.value = color.hexString;
  colorRGB.style.backgroundColor = color.hexString;
  valuesRGB.value= color.rgbString;

  const { r, g, b } = color.rgb;
  const { c, m, y, k } = rgb2cmyk(r, g ,b);
  
  colorCMYK.style.backgroundColor = color.hexString;
  valuesCMYK.value = `cmyk(${c}%, ${m}%, ${y}%, ${k}%)`;
  
 
  for( let i=0; i< colorText.length; i++){
    colorText[i].style.color = color.rgbString;
  }
  for( let i=0; i< colorBtn.length; i++){
    colorBtn[i].style.backgroundColor = color.rgbString;
  }
 
});

 .color-types {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.color-types li {
  display: inline-block;
  padding: 10px;
  border-bottom: 2px solid transparent;
  -webkit-transition: border-color 0.6s ease;
  transition: border-color 0.6s ease;
  cursor: pointer;
}
.color-types li.active {
  color: #82B23E;
  border-color: #82B23E;
}
 .color {
  border-bottom: 2px solid #000;
  display: flex;
  padding: 25px 0 10px;
  align-items: center;
}
#color-hex,  #color-rgb, #color-cmyk {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
 #values-hex, #values-rgb, #values-cmyk {
  border: none;
  outline: none;
}

<script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
     <div class="color-scheme-container">
                                            <div id="color-scheme-content">
                                                <ul class="color-types">
                                                    <li class=" tablink active" onclick="openColor(event,'Hex')">HEX
                                                    </li>
                                                    <li class="tablink" onclick="openColor(event,'Rgb')">RGB</li>
                                                    <li class="tablink" onclick="openColor(event,'Cmyk')">CMYK</li>
                                                </ul>

                                                <div id="Hex" class="color">
                                               
                                                    <div id="color-hex"></div>
                                                    <input type="text" id="values-hex">
                                                    <!-- <div id="values-hex"></div> -->
                                                    <button type="button" onclick="onColorChange()">Update</button>
                                                </div><!--hex-->
                                                <div id="Rgb" class="color" style="display:none">

                                                        <div id="color-rgb"></div>
                                                        <input type="text" id="values-rgb">
                                                        <div id="values-rgb"></div>
                                                        <button>Update</button>
                                                </div><!--rgb-->

                                                <div id="Cmyk" class="color" style="display:none">
                                                        <div id="color-cmyk"></div>
                                                        <input type="text" id="values-cmyk">
                                                        <div id="values-cmyk"></div>
                                                        <button>Update</button>
                                                     
                                                </div><!--cmyk-->
                                                <!--color-scheme-content-->
                                                <div id="color-picker-container"></div>
                                            </div>
                                            <!--olor-scheme-content-->
                                        </div>