スタティックカラーの代わりにカラーピッカーを実装する方法

Question

私はペイントウェブサイトを開発しています。私は色を選択するためのスクリプトを持っています。これまではうまくいっています。

ここで私の色を選択するコードです。

<div class="colorpick"> 
    <div class="pick" style="background-color:rgb(150, 0, 0);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(0, 0, 152);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(0, 151, 0);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(255, 0, 5);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(255, 255, 0);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(0, 255, 255);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(255, 0, 255);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(255, 150, 0);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(255, 0, 150);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(0, 255, 150);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(150, 0, 255);" onclick="hello(this.style.backgroundColor);"></div> 
    <div class="pick" style="background-color:rgb(0, 150, 255);" onclick="hello(this.style.backgroundColor);"></div> 
</div> 

色が

ように示されているこれは私の機能のhello（）

<script> 
    function hello(e){ 
    var rgb = e.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(','); 
    myColor.r = parseInt(rgb[0]); 
    myColor.g = parseInt(rgb[1]); 
    myColor.b = parseInt(rgb[2]); 
    curColor = myColor; 
    console.log(curColor); 
    } 
</script> 

にコードされているが、私は、カラーピッカーを実装したいです。私はカラーピッカーのスクリプトも持っています。

<input type="color" value="#ffffff" onchange="clickColor(0, -1, -1, 5)" id="html5colorpicker"> 

私の質問は、ということです：はどのように私は私の現在のコードで、カラーピッカーを統合することができますか？どんな助けでも大歓迎です。

Answer 1

試してみてください：spectrum.jsとjqueryuiを使って、colorpickerを実装することができます。

HTML：

<h2>Basic Usage</h2> 
<input type='text' class="basic"/> 

のjQuery：

$(".basic").spectrum({ 
    color: "#f00", 
    change: function(color) { 
     $("#basic-log").text("change called: " + color.toHexString()); 
    } 
}); 

JSFiddle Demo

http://bgrins.github.io/spectrum/spectrum.js
http://bgrins.github.io/spectrum/spectrum.css

Answer 2

clickColorメソッドの実装を変更するだけです。これは、html5colorpickerから色を変更した後に呼び出されるメソッドです。そのような

何か：

function clickColor(){ 
    var hexColorString = document.getElementById('html5colorpicker').value; 
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColorString); 
    if(result){ 
     myColor.r = parseInt(result[1], 16); 
     myColor.g = parseInt(result[2], 16); 
     myColor.b = parseInt(result[3], 16); 
    } 
    curColor = myColor; 
    console.log(curColor); 
} 

スクリプトがmyColorとcurColorは既にグローバルスコープで定義されていることを前提としています。

また新しいclickColorの定義と一致するようにその行を変更してください：

<input type="color" value="#ff0000" onchange="clickColor()" id="html5colorpicker">

あなたは（私の頭の上から入力