如何在html中创建颜色选择器？

ig9co6j1 于 2023-08-01 发布在其他

关注(0)|答案(6)|浏览(134)

如何制作一个颜色选择器，就像我们在不同的网站上看到的那样，用户可以向下滚动不同的颜色，点击就可以获得颜色代码？
我曾尝试做一个行和列，但它不是那么舒服，所以希望它像一个颜色选择器
你可以看看我是如何尝试它的颜色框：

的数据
我问了很多问题，但我无法解决这个问题。

Html

来源：https://stackoverflow.com/questions/40253697/how-to-create-a-color-picker-in-html

6条答案

按热度按时间

pokxtpni1#

选项#1 -原生HTML颜色选择器

如前所述，您可以使用Native HTML color picker元素：

<input type="color" />

字符串
有关更多信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

选项#2 -第三方拾色器

如果原生颜色选择器不符合您的标准，因为它具有过时的外观，并且看起来不像现代颜色选择器那样光滑，您可以使用Web上数百个颜色选择器中的一个。即使在NPM包页面上进行简单的搜索，也会返回几百个结果供选择。
https://www.npmjs.com/search?q=color%20picker的

选项#3 -构建自己的拾色器

如果你和我一样，在对颜色选择器库进行了长时间的搜索之后，你没有找到符合你标准的选择器，你可以构建你的颜色选择器，这不会花太长时间，我将演示。
1.查找将作为选择器的色轮图像，例如：
（真实的应用中可能需要更复杂的色轮）
x1c 0d1x的数据
1.在.html文件中，创建一个canvas元素。

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

型
1.给予画布元素border-radius: 50%，这将使画布变圆，所以只有圆内的点击会被触发，边缘的点击会被忽略（我们在接下来的步骤中需要点击事件）。
1.在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] + ")");
    }
}

型

赞(0）回复(0）举报 2023-08-01

7y4bm7vi2#

您可以简单地通过<input>创建一个颜色选择器，类型为color。但它只适用于现代浏览器。

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

字符串

赞(0）回复(0）举报 2023-08-01

iszxjhcz3#

另外，对于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）回复(0）举报 2023-08-01

ibps3vxo4#

您可以简单地创建一个颜色选择器，通过与类型作为颜色。但它只适用于现代浏览器。
不要使用颜色选择器。它的作用是超随机的，旧的浏览器把它变成一个常规的输入，新的浏览器是随机的。你最好的选择是像我一样，要么选择一个JavaScript颜色选择器，要么创建你自己的。我被迫创建自己的，因为目前所有的采摘者都太具体的项目。

赞(0）回复(0）举报 2023-08-01

prdp8dxp5#

请尝试以下操作：

<input name="clr" type="color">

字符串

赞(0）回复(0）举报 2023-08-01

cbeh67ev6#

type=“color”方式

基本上html有很多输入类型，如按钮和复选框，我们可以使用颜色类型

<input id="idHere" type="color">
<button onclick="alert(document.getElementById('idHere').value)">color value</button>

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

如何在html中创建颜色选择器？

6条答案

选项#1 -原生HTML颜色选择器

选项#2 -第三方拾色器

选项#3 -构建自己的拾色器

type=“color”方式

相关问题

热门标签

最新问答