web-dev-qa-db-ja.com

HTMLでカラーピッカーを作成する方法

ユーザーがさまざまな色を下にスクロールしてクリックすると色コードを取得できるさまざまなWebサイトで見られるように、カラーピッカーを作成する方法は？

行と列を作ってみましたが、あまり快適ではなかったのでカラーピッカーにしたい

あなたは私がそれをどのようにしようとしているのかをカラーボックスで見ることができます：

enter image description here

別の質問をしましたが、この問題を解決できません。

htmlcolorscolorboxcolor-picker
11
Rakesh Ram

<input>を使用して、タイプを色として指定するだけで、カラーピッカーを作成できます。ただし、最新のブラウザでのみ機能します。

<input name="Color Picker" type="color"/>

https://jsfiddle.net/itsselvam/9sL7s7ox/ でプレビュー

10
Selvam

オプション＃1-ネイティブHTMLカラーピッカー

前の回答で述べたように、ネイティブHTMLカラーピッカー要素を使用できます。

<input type="color" />

オプション＃2-サードパーティのカラーピッカー

ネイティブカラーピッカーが基準を満たしていない場合は、外観が古く、最新のカラーピッカーほど滑らかではないため、文字通り何百ものカラーピッカーをWeb上で使用できます。 NPMパッケージページでの単純な検索でも、数百の結果が返されます。
https://www.npmjs.com/search?q=color%20picker

オプション＃3-独自のカラーピッカーを作成する

私が好きで、カラーピッカーライブラリを長時間検索しても、条件を満たすピッカーが見つからなかった場合は、カラーピッカーを作成できます。

  1. ピッカーとなるカラーホイール画像を見つけます。次に例を示します。
    （実際のアプリケーションでは、より複雑なカラーホイールが必要になる可能性があります）
    enter image description here

  2. .htmlファイルにcanvas要素を作成します。

<canvas id="colorCanvas" class="color-canvas" width="250" height="250"></canvas>

  1. キャンバス要素を与えるborder-radius: 50%、これによりキャンバスが丸くなるため、円の内側のクリックのみが発生し、エッジのクリックは無視されます（次の手順でクリックイベントが必要になります）。

  2. JavaScriptで、カラーピッカー画像を使用してキャンバスを初期化し、クリックイベントをリッスンします


function initColorPicker()
{
    var canvasEl = document.getElementById('colorCanvas');
    var canvasContext = canvasEl.getContext('2d');

    var image = new Image(250, 250);
    image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height); 
    image.src = "./images/myColorPickerImage.png";

    canvasEl.onclick = function(mouseEvent) 
    {
      var imgData = canvasContext.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);
      var rgba = imgData.data;

      alert("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")");
    }
}
8
Gil Epshtain

タイプを色として指定するだけで、カラーピッカーを作成できます。ただし、最新のブラウザでのみ機能します。

カラーピッカーを使用しないでください。それは何をするかに関しては超ランダムであり、古いブラウザはそれを通常の入力に変え、新しいものはそれがランダムになるとランダムになります。あなたの最善の策は、私と同じようにして、Javascriptカラーピッカーを選択するか、独自のカラーピッカーを作成することです。現在のピッカーはすべてプロジェクト固有なので、自分で作成する必要があります。

1
Robert Jackson

Gil Epshtain の回答に加えて、画像をロードしたくない場合は、キャンバスをグラデーションで塗りつぶすことができます

function initColorPicker() {
  var canvas = document.getElementById('colorCanvas');
  var canvasContext = canvas.getContext('2d');

  let gradient = canvas.getContext('2d').createLinearGradient(0, 0, canvas.width, 0)
  gradient.addColorStop(0, '#ff0000')
  gradient.addColorStop(1 / 6, '#ffff00')
  gradient.addColorStop((1 / 6) * 2, '#00ff00')
  gradient.addColorStop((1 / 6) * 3, '#00ffff')
  gradient.addColorStop((1 / 6) * 4, '#0000ff')
  gradient.addColorStop((1 / 6) * 5, '#ff00ff')
  gradient.addColorStop(1, '#ff0000')
  canvas.getContext('2d').fillStyle = gradient
  canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)

  gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, canvas.height)
  gradient.addColorStop(0, 'rgba(255, 255, 255, 1)')
  gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0)')
  gradient.addColorStop(1, 'rgba(255, 255, 255, 0)')
  canvas.getContext('2d').fillStyle = gradient
  canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)

  gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, canvas.height)
  gradient.addColorStop(0, 'rgba(0, 0, 0, 0)')
  gradient.addColorStop(0.5, 'rgba(0, 0, 0, 0)')
  gradient.addColorStop(1, 'rgba(0, 0, 0, 1)')
  canvas.getContext('2d').fillStyle = gradient
  canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)


  canvas.onclick = function(e) {
        console.log()
    var imgData = canvasContext.getImageData((e.offsetX / canvas.clientWidth) * canvas.width, (e.offsetY / canvas.clientHeight) * canvas.height, 1, 1)
    var rgba = imgData.data;
    var color = "rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")";
    console.log("%c" + color, "color:" + color)
  }
}

initColorPicker()
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
}

canvas {
  height: 100%;
  width: 100%;
}
<html>

  <body>
    <canvas id="colorCanvas" class="color-canvas" width="100%" height="100%"></canvas>
  </body>

</html>
0
Богуслав Павлишинець