logo标签列表

如何在HTML中创建一个颜色选择器？

htmlcolorscolorboxcolor-picker
15
如何制作一个颜色选择器，就像我们在不同的网站上看到的那样，用户可以滚动不同的颜色，点击后可以获得颜色代码？
我尝试过制作行和列，但不太舒适，所以希望它能像颜色选择器一样。
您可以看一下颜色框，我正在尝试将其制作成这样：

enter image description here

我已经看了很多问题，但是我无法解决这个问题。

我制作了一个简单的颜色选择器，其实并不难！只需要一些数学知识，关键是使用HSLA。 - vsync
6个回答
22

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

如前面的回答所提到的，您可以使用原生 HTML 颜色选择器元素：

<input type="color" />

更多信息请参见：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

选项2 - 第三方颜色选择器

如果原生的颜色选择器不符合您的要求，因为它看起来过时，而且不像现代的颜色选择器那样流畅，您可以使用网络上数百个颜色选择器中的任何一个。即使在NPM软件包页面上进行简单搜索也会返回几百个结果供您选择。
https://www.npmjs.com/search?q=color%20picker

选项3 - 构建自己的颜色选择器

如果您和我一样，在长时间搜索颜色选择器库后，没有找到符合您要求的选择器，您可以构建自己的颜色选择器，这并不需要太长时间，我将演示如何实现。

  1. 找一张色轮图片作为你的选择器，例如：
    （在实际应用中可能需要更复杂的颜色轮）
    color wheel

  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] + ")");
    }
}
有趣的是，第三个选项对我不起作用。（尝试过 .php 和 .html） - Momoro
@Momoro，我不知道你的确切解决方案是什么，但我的解决方案是一个纯客户端解决方案，它不需要任何PHP或其他服务器端编码。 - Gil Epshtain
我已经知道它不需要PHP或服务器端编码，我正在测试其他格式。 - Momoro
好的，举个例子，如果我选择了第一个选项＃1，如何获取用户所选变体的颜色？ - NNL993
@NNL993，您可以在API文档中查看：https://www.w3schools.com/tags/att_input_type_color.asp 使用value属性来设置/获取所选的颜色。 - Gil Epshtain
16

您可以通过使用类型为“color”的<input>来创建一个简单的颜色选择器。但这仅适用于现代浏览器。

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

我认为大多数所谓的现代浏览器不支持。 - Mohammed Shareef C
1
这是一个很好的初学者答案，但我认为OP想要一个真正的 自制颜色选择器，一个你不必点击打开新窗口的选择器，并且它看起来不会那么单调。（<input type="color">非常单调和令人讨厌..） - Momoro
1
根据 https://caniuse.com/input-color 的说法，它在所有现代浏览器上都可以使用。 - Donald Duck
@DonaldDuck。很高兴听到这个消息，尽管是几年后。 - undefined
8
除了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

请尝试以下方法：

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

0

你可以通过将类型设置为颜色来简单地创建一个颜色选择器。但它只在现代浏览器中有效。

不要使用颜色选择器。它的行为非常随机，旧版浏览器会将其转换为普通输入框，新版浏览器也是随机的。你最好的选择是像我一样选择一个JavaScript颜色选择器或者自己创建一个。我被迫创建自己的颜色选择器，因为所有当前的选择器都太针对特定项目了。

大多数现代浏览器都不支持它。不过，我正在使用的当前浏览器是Mozilla Firefox，它可以正常工作。 - Momoro
0

type="color" way

basically html has an many types for input like button and checkbox We can use the color type 

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

欢迎来到SO！请先看一下之前给出的其他答案。你的方法已经在那里提到了。为了保持网站的清晰和方便查找答案，我们尽量避免重复回答。 - ahuemmer
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接