js colorpicker实现
使用原生JavaScript实现颜色选择器
通过HTML5的<input type="color">元素可以快速实现基础颜色选择器功能。现代浏览器都支持该输入类型，点击时会弹出系统原生颜色选择对话框。
<input type="color" id="colorPicker" value="#ff0000">
<script>
const colorPicker = document.getElementById('colorPicker');
colorPicker.addEventListener('input', (e) => {
console.log('Selected color:', e.target.value);
});
</script>自定义颜色选择器UI
如果需要完全自定义界面，可以通过Canvas绘制色相环和亮度梯度：
function createColorPicker() {
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
const ctx = canvas.getContext('2d');
// 绘制色相环
const radius = 150;
for(let angle = 0; angle < 360; angle++) {
const startAngle = (angle - 2) * Math.PI / 180;
const endAngle = angle * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.arc(150, 150, radius, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = `hsl(${angle}, 100%, 50%)`;
ctx.fill();
}
return canvas;
}集成第三方库
使用成熟的颜色选择器库可以节省开发时间：
-
Spectrum.js - 轻量级jQuery插件
<input type='text' id="spectrum"/> <script> $("#spectrum").spectrum({ color: "#f00", preferredFormat: "hex" }); </script> -
Pickr - 无依赖的现代颜色选择器
const pickr = Pickr.create({ el: '.color-picker', default: '#42445A', components: { preview: true, opacity: true, hue: true } });
实现颜色格式转换
颜色选择器通常需要处理多种格式转换：
function hexToRgb(hex) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return { r, g, b };
}
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if(max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return { h: h*360, s: s*100, l: l*100 };
}添加高级功能
完善的颜色选择器应包含以下功能：
-
透明度控制
<input type="range" id="alpha" min="0" max="100" value="100"> -
预设调色板
const swatches = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00']; swatches.forEach(color => { const swatch = document.createElement('div'); swatch.style.backgroundColor = color; swatch.addEventListener('click', () => updateColor(color)); }); -
颜色历史记录
const colorHistory = []; function addToHistory(color) { colorHistory.unshift(color); if(colorHistory.length > 8) colorHistory.pop(); }
