Question

我有一个包含两列数据的js文件。 Col 1具有颜色的十六进制代码，col 2具有颜色的名称（该代码的颜色）：

// JavaScript Document
/*Below lists the hex and equiv colour.
*/
var mycolors = {
"000000": "Black",
"000080": "Navy Blue",
"0000C8": "Dark Blue",
"0000FF": "Blue",
"000741": "Stratos",
"001B1C": "Swamp",

在我的html网页中，我有一个颜色选择器，可以生成所点击的任何颜色的十六进制值。

我希望能够使用该十六进制数在col1中查找外部js文件，并从col2返回颜色名称。

我对网络所有内容的体验有限，并且谷歌搜索和反复试验都失败了。

任何人都可以举例说明如何做到这一点吗？

<div class="paletteandbox">
    <div class="palette">
     <canvas width="234" height="199" id="canvas_picker"></canvas> </div>
            <script type="text/javascript">
                var canvas = document.getElementById('canvas_picker').getContext('2d');
    // create an image object and get it’s source
                var img = new Image();
                img.src = 'picker3hexagon.gif';
    // copy the image to the canvas
                $(img).load(function(){
                canvas.drawImage(img,0,0);
                }); <!-- OK -->

    // http://www.javascripter.net/faq/rgbtohex.htm
                function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
                function toHex(n) {
                n = parseInt(n,10);
                if (isNaN(n)) return "00";
                n = Math.max(0,Math.min(n,255));
                return "0123456789ABCDEF".charAt((n-n%16)/16)  + "0123456789ABCDEF".charAt(n%16);
                }
    $('#canvas_picker').click(function(event){
      // getting user coordinates
      var x = event.pageX - this.offsetLeft;
      var y = event.pageY - this.offsetTop;
      // getting image data and RGB values
      var img_data = canvas.getImageData(x, y, 1, 1).data;<!-- OK -->
      var R = img_data[0];
      var G = img_data[1];
      var B = img_data[2];  var rgb = R + ',' + G + ',' + B;
      // convert RGB to HEX
      var hex = rgbToHex(R,G,B);
      // making the color the value of the input
      $('#rgb input').val(rgb);
      $('#hex input').val('#' + hex);
      $("#path3349").css("fill", "#" + hex); 
      $('#hex').val('#' + hex);   
    });
</script>
</div>
<!-- palette-->
<div class="box">
<script src="colourpicker.js">
var colorhex = hex
var colorname = mycolors[colorhex];
</script> 
     Selected Background Colour:
     <div id="colorname"><input type="text" readonly="readonly" /></input></div>
     Background Colour Codes:
     <div id="hex"><input type="text" readonly="readonly" /></input>HEX</div>
     <div id="rgb"><input type="text" readonly="readonly" /></input>RGB</div>
</div> <!-- box-->
</div> <!-- palette and box-->

Answer 1

我已经稍微更改了一下，因为你的代码没有工作，但它会让你知道如何从你的对象中查找并使用它。

您需要的部分是： var englishColorName = mycolors [key]

其中key是十六进制值。因此，您可以使用该十六进制值在密钥中查找对象。

您的对象在外部js文件中定义的事实是无关紧要的，只要它在此代码之前加载它将运行相同。

var mycolors = {
  "000000": "Black",
  "000080": "Navy Blue",
  "0000C8": "Dark Blue",
  "0000FF": "Blue",
  "000741": "Stratos",
  "001B1C": "Swamp"
}

for (var key in mycolors) {
  //console.log("Key: ", key);
  //console.log("Color: ", mycolors[key]);

  $('#colorsSelect')
    .append($("<option></option>")
      .attr("value", key)
      .text(mycolors[key]));
}

var colorhex = hex
var colorname = mycolors[colorhex];


// http://www.javascripter.net/faq/rgbtohex.htm
function rgbToHex(R, G, B) {
  return toHex(R) + toHex(G) + toHex(B)
}

function convertHex(hex){
    hex = hex.replace('#','');
    r = parseInt(hex.substring(0,2), 16);
    g = parseInt(hex.substring(2,4), 16);
    b = parseInt(hex.substring(4,6), 16);

    result = 'rgba('+r+','+g+','+b+')';
    return result;
}

function toHex(n) {
  n = parseInt(n, 10);
  if (isNaN(n)) return "00";
  n = Math.max(0, Math.min(n, 255));
  return "0123456789ABCDEF".charAt((n - n % 16) / 16) + "0123456789ABCDEF".charAt(n % 16);
}

$( "#colorsSelect" ).change(function() {
  var hex = $( this ).val();
  var rgb = convertHex(hex);
  $('#hex input').val('#' + hex);
  $('#rgb input').val(rgb);
});

/*
$('#canvas_picker').click(function(event) {
  // getting user coordinates
  var x = event.pageX - this.offsetLeft;
  var y = event.pageY - this.offsetTop;
  // getting image data and RGB values
  var img_data = canvas.getImageData(x, y, 1, 1).data; <!-- OK -->
  var R = img_data[0];
  var G = img_data[1];
  var B = img_data[2];
  var rgb = R + ',' + G + ',' + B;
  // convert RGB to HEX
  var hex = rgbToHex(R, G, B);
  // making the color the value of the input
  $('#rgb input').val(rgb);
  $('#hex input').val('#' + hex);
  $("#path3349").css("fill", "#" + hex);
  $('#hex').val('#' + hex);
});
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="paletteandbox">
  <div class="palette">
    <canvas width="234" height="199" id="canvas_picker"></canvas>
  </div>
</div>
<!-- palette-->
<div class="box">
  Selected Background Colour:

  <select id="colorsSelect">
    <option value="-1">--Select a color--</option>
  </select>

  <br>
  <br>Converted Background Colour Codes:
  <div id="hex">
    HEX:
    <input type="text" readonly="readonly" />
  </div>
  <div id="rgb">
    RGB:
    <input type="text" readonly="readonly" />
  </div>
  <!-- box-->
</div>
<!-- palette and box-->

html页面中的JS文件数组javascript，用于退出数据

1 个答案: