前端实现潘通色选择器

前端实现潘通色选择器

1. 获取颜色, 选择需要的官网标准色库, 提取所有颜色对应的rgb和hex代码近似值!

   官网颜色div结构如下,包含所需信息!

   <li data-rgb="#EA27C2" data-id="2127" data-gid="1" data-brand="PANTONE" data-name="" data-code="807 C" data-hex="#EA27C2" data-hsv_h="312" 
     data-hsv_s="83" data-hsv_v="91" 
     data-rgb_r="234" data-rgb_g="39" data-rgb_b="194" 
     data-cmyk_c="12" data-cmyk_m="76" data-cmyk_y="0" 
     data-cmyk_k="0" data-lab_l="54.91" data-lab_a="82.3" data-lab_b="-35.17">\n\t\t\t\t\t \t<span style="background:#EA27C2"></span>\n\t\t\t\t\t</li>
   

   控制台直接提取生成数组

   const getData = (str) => {
     const hex = str.match(/data-hex=\"(.*?)\"/)[1];
     const r = str.match(/data-rgb_r=\"(.*?)\"/)[1];
     const g = str.match(/data-rgb_g=\"(.*?)\"/)[1];
     const b = str.match(/data-rgb_b=\"(.*?)\"/)[1];
     const rgb = [r, g, b];
     const pantone = str.match(/data-code=\"(.*?)\"/)[1];
     return { hex, rgb, pantone }
   }
   const pantone = [];
   $(".color-list .list li").each((i, e) => {
     const str = e.outerHTML;
     pantone.push(getData(str));
   });
   console.log("🚀 ~ file: 8998.js:26 ~ pantone:", pantone);
   

2. 基于已有颜色选择库anish2690进行改造,实现点选rgb获取相近的潘通色号(高光/哑光)

   

import pantoneC from "./pantoneC.json"
import pantoneU from "./pantoneU.json"
export const pantoneColors = [...pantoneC, ...pantoneU]

// 计算两个RGB颜色之间的距离（欧几里得距离）
const colorDifference = (rgb1, rgb2) => {
  let rDiff = Math.pow(rgb1[0] - rgb2[0], 2) // 计算红色分量的平方差
  let gDiff = Math.pow(rgb1[1] - rgb2[1], 2) // 计算绿色分量的平方差
  let bDiff = Math.pow(rgb1[2] - rgb2[2], 2) // 计算蓝色分量的平方差
  return Math.sqrt(rDiff + gDiff + bDiff) // 返回平方根作为距离
}

// 找到最接近的N个Pantone颜色
export const closestPantoneColors = (rgbColor, pantoneArr, count = 8) => {
  let distances = [] // 存储每个Pantone颜色的距离
  // 遍历所有Pantone颜色，计算与目标RGB颜色的距离
  pantoneArr.map(item => {
    let pantoneRgb = item.rgb
    let diff = colorDifference(rgbColor, pantoneRgb)
    distances.push({ pantone: item, diff }) // 保存Pantone颜色及其距离
  })
  // 按距离从小到大排序
  distances.sort((a, b) => a.diff - b.diff)
  // 返回最接近的N个Pantone颜色
  return distances.slice(0, count).map(item => item.pantone)
}
export const getPantoneUC = rgbColor => {
  return {
    pantoneU: closestPantoneColors(rgbColor, pantoneU),
    pantoneC: closestPantoneColors(rgbColor, pantoneC),
  }
}

搜索实现同理,略过!