JSファイル配列JavaScriptを使用してデータをリタイアするHTMLページのjavacript

Question

私は2つのデータ列を含むjsファイルを持っています。コル1は、カラーの16進コードを持っており、COL 2（そのコードの）色の名前を持っている：私のHTMLウェブページで

// 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", 

私がクリックした任意の色を16進値を生成し、カラーピッカーを持っています。

私はその16進数を使って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 "ABCDEF".charAt((n-n%16)/16) + "ABCDEF".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 [キー]キーは、あなたの進値である

。だから、その16進数のキーでオブジェクトを見る。

あなたのオブジェクトが外部の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 "ABCDEF".charAt((n - n % 16)/16) + "ABCDEF".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-->