読者です 読者をやめる 読者になる 読者になる

画像から色コードRGB値をGET

ブラウザで画像を表示して画像から色コード(RGB値)を抽出するものを作ってみた。
サーバは使用しない。jQuery でローカルPCだけで実行する。
RGB値を抽出後、右クリックでクリップボードにコピーしたかったのだが、GitHub にある zeroclipboard は、
Flash を使用するので使う気になれず、右クリックでクリップボードにコピーは、諦めることにした。
jQuery の記述は以下のようになる。

<script type="text/javascript">
$(function(){
   // <input id="imgfile" イメージファイル読込
   $('#imgfile').change(function(){
      if (window.File){
         var input = document.getElementById("imgfile");
         var reader = new FileReader();
         reader.readAsDataURL(input.files[0]);
         reader.onloadend = function(event){
            var img = document.getElementById("target");
            img.src = event.target.result;

            // 下で宣言した pick結果のクリア関数呼び出し
            clearPaste();
         }
         // マウス over → color pick
         $('#target').mousemove(function(e){
            this.canvas = $('<canvas />')[0];
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
            var pixelData = this.canvas.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;

            hexR = toHex(pixelData[0]);
            hexG = toHex(pixelData[1]);
            hexB = toHex(pixelData[2]);
            hexA = toHex(pixelData[3]);

            $('#decR').html(pixelData[0]);
            $('#decG').html(pixelData[1]);
            $('#decB').html(pixelData[2]);
            $('#decA').html(pixelData[3]);

            $('#hexR').html(hexR);
            $('#hexG').html(hexG);
            $('#hexB').html(hexB);
            $('#hexA').html(hexA);
            $('#hexRGB').attr("value", hexR + hexG + hexB);
            $('#pcolor').css("background-color", "#" + hexR + hexG + hexB)
         });
      }
   });
   var toHex = function(v){
      return v < 16 ? '0' + v.toString(16) : v.toString(16);
   };

   $('#target').bind("contextmenu", function(){
      $('#pasteRGB').html(hexR + hexG + hexB);
      return false;
   });
   // pick結果のクリア
   var clearPaste = function(){
      $('#decR').html("");
      $('#decG').html("");
      $('#decB').html("");
      $('#decA').html("");
      $('#hexR').html("");
      $('#hexG').html("");
      $('#hexB').html("");
      $('#hexA').html("");
      $('#hexRGB').attr("value", "");
      $('#pasteRGB').html("");
      $('#pcolor').css("background-color", "#ffffff")
   };
});
</script>

HTML―BODY の記述は、、、

<body>
<h2>Color Picker</h2>
<div>
   <input id="imgfile" name="imgfile" type="file" accept="image/*" />
   <br/><br/>
   <table class="grid">
      <tr>
         <th>R</th><td><span id="decR"></span></td><td><span id="hexR"></span></td>
         <th>RGB</th><td><input id="hexRGB" maxlength="6" size="6"/></td>
         <th>paste</th><td class="grid-paste"><span id="pasteRGB"></span></td>
      </tr>
      <tr>
         <th>G</th><td><span id="decG"></span></td><td><span id="hexG"></span></td>
         <td colspan="4" rowspan="3" id="pcolor"></td>
      </tr>
      <tr>
         <th>B</th><td><span id="decB"></span></td><td><span id="hexB"></span></td>
      </tr>
      <tr>
         <th>A</th><td><span id="decA"></span></td><td><span id="hexA"></span></td>
      </tr>
   </table>
</div>
<br/><br/>
<div>
   <img id="target" />
</div>


chrome での実行、マウス over で画像の適当なところで右クリックで、paste の個所が固定で貼り付け表示されるようになる。

f:id:posturan:20160313190855j:plain