颜色选择器的纯JS实现

前言

最近在逛论坛的时候发现了一个新API：EyeDropper，仅需创建一个实例，然后调用open方法，就可以取到你屏幕内所有可以取到的颜色，可惜兼容性不太行，只有Chrome，Edge，Opera支持，MDN文档
知道了这个API后我也有了一个想实现取色器的想法，工作摸鱼期间👻折腾了几天搞了出来，实现步骤大致以下几步

1. 所需页面创建实例，初始化所需属性
2. 需开启时调用open方法开启取色器，网页截屏生成canvas，初始化监听事件和浮动元素(放大镜)
3. 鼠标移动时根据坐标获取颜色数据修改放大镜颜色
4. 鼠标点击或者按Esc键后销毁

预览

预览地址：https://songlh.top/page-color-picker/
github：https://github.com/LHRUN/page-color-picker

初始化方法

初始化方法没什么说的，就是把需要的属性和方法赋值一遍初始值，然后接收一个鼠标点击时的回调

export class ColorPicker {
  canvasContainer: HTMLDivElement | null = null // canvas容器元素
  canvas: HTMLCanvasElement | null = null // 截屏canvas
  context: CanvasRenderingContext2D | null = null // 截屏canvas[context]
  floatContainer: HTMLDivElement | null = null // 鼠标移动时的浮动容器元素
  onChange?: (color: string) => void // 点击鼠标后的回调
  color = '' // 颜色值
  elementId = '' // 元素唯一id
  colorArr: {
    el: HTMLDivElement
    row: number
    col: number
  }[] = [] // 放大镜颜色数组

  constructor(
    onChange?: (color: string) => void // 点击后回调
  ) {
    this.onChange = onChange
  }
  // ...
}

开启取色器

开启取色器分为4步

1. 初始化canvas容器
2. 生成canvas，我使用的是html2canvas
3. 初始化监听事件
4. 创建浮动元素

/**
* 开启取色器
*/
open() {
  // 获取随机id
  this.elementId = getId()
  // 初始化canvas容器
  this.initContainer()
  html2canvas(document.body).then((canvas) => {
    if (canvas && this.canvasContainer) {
      // 初始化事件
      this.initEvent(canvas)
      this.canvasContainer.style.display = 'block'
      this.canvasContainer.appendChild(canvas)
      this.canvas = canvas
      this.context = canvas.getContext('2d')
      // 创建浮动元素
      this.initFloatContainer()
    }
  })
}

• 初始化canvas容器

initContainer() {
  // 创建元素我封装了一个方法
  const canvasContainer = createDocument(
    'div',
    styleObj.canvasContainer,
    document.body
  )
  this.canvasContainer = canvasContainer
  return canvasContainer
}

/**
 * 创建元素
 * @param elType 元素类型
 * @param styleObj 样式对象
 * @param parent 父级元素
 * @returns element
 */
export const createDocument = <T extends keyof HTMLElementTagNameMap>(
  elType: T,
  styleObj: Record<string, string | number>,
  parent: HTMLElement | DocumentFragment
): HTMLElementTagNameMap[T] => {
  const el = document.createElement(elType)
  Object.keys(styleObj).forEach((key) => {
    if (isValidKey(key, styleObj)) {
      Reflect.set(el.style, key, styleObj[key])
    }
  })
  parent.appendChild(el)
  return el
}

• 初始化事件

/**
 * 初始化事件
 * @param canvas
 */
initEvent(canvas: HTMLCanvasElement) {
  canvas.addEventListener('mousemove', this.canvasMouseMove)
  canvas.addEventListener('mousedown', this.canvasMouseDown)
  window.addEventListener('keydown', this.onKeyDown)
}

• 创建浮动元素容器

initFloatCOntainer() {
  if (this.canvasContainer) {
    // 创建浮动元素容器
    const floatContainer = createDocument(
      'div',
      styleObj.floatContainer,
      this.canvasContainer
    )

    // 创建放大镜的小颜色块
    const fragment = document.createDocumentFragment()
    for (let i = 1; i <= COLOR_ITEM_SIZE * COLOR_ITEM_SIZE; i++) {
      const row = Math.ceil(i / COLOR_ITEM_SIZE)
      const col = i - (row - 1) * COLOR_ITEM_SIZE
      const style: Record<string, string | number> = {
        ...styleObj.colorItem
      }

      if (row === 6 && col === 6) {
        style.borderColor = '#000000'
      }
      const itemEl = createDocument('div', style, fragment)
      itemEl.setAttribute('id', `${this.elementId}${i}`)
      this.colorArr.push({
        el: itemEl,
        row,
        col
      })
    }
    floatContainer.appendChild(fragment)
    const textEl = createDocument('div', styleObj.text, floatContainer)
    textEl.setAttribute('id', `${this.elementId}text`)
    this.floatContainer = floatContainer
  }
}

鼠标移动

• 根据鼠标移动时的坐标，计算需要处理的颜色区域，然后调用CanvasRenderingContext2D.getImageData()方法，这个方法会返回一个ImageData对象，这个对象里就包含RGBA数据，然后把这些数据展示到放大镜元素上，就有了放大的效果

canvasMouseMove = (e: MouseEvent) => {
  if (this.context) {
    const x = e.pageX * window.devicePixelRatio
    const y = e.pageY * window.devicePixelRatio
    // 获取放大镜所需区域颜色
    const colors = this.getColors(x, y)
    if (this.floatContainer && colors) {
      // 根据坐标改变放大镜位置
      this.floatContainer.style.transform = `translate(${e.pageX - 82.5}px, ${
        e.pageY - 82.5
      }px )`
      if (this.floatContainer.style.visibility === 'hidden') {
        this.floatContainer.style.visibility = 'visible'
      }
      const textEl = document.getElementById(`${this.elementId}text`)

      // 遍历每个颜色块，修改颜色
      for (
        let i = 0;
        i < COLOR_ITEM_SIZE * COLOR_ITEM_SIZE;
        i++
      ) {
        const { el, row, col } = this.colorArr[i]
        const [r, g, b, a] = colors[i]
        // toHexString rgba转16进制
        const hexStr = toHexString({ r, g, b, a: a / 255 })

        //  最中间的颜色保存起来
        if (row === 6 && col === 6 && textEl) {
          textEl.textContent = hexStr
          textEl.style.color = hexStr
          this.color = hexStr
        }

        el.style.backgroundColor = hexStr
      }
    }
  }
}

/**
 * 获取放大镜所需区域颜色
 * @param x
 * @param y
 * @returns
 */
getColors(x: number, y: number) {
  if (this.context) {
    const { data } = this.context.getImageData(
      x - 5,
      y - 5,
      COLOR_ITEM_SIZE,
      COLOR_ITEM_SIZE
    )
    const colors = []
    for (let i = 0; i < data.length; i += 4) {
      colors.push([data[i], data[i + 1], data[i + 2], data[i + 3]])
    }
    return colors
  }
}

鼠标点击

• 鼠标点击触发回调，销毁元素

canvasMouseDown = () => {
  this?.onChange?.(this.color)
  this.destroy()
}

destroy() {
  if (this.canvas) {
    this.canvas.removeEventListener('mousemove', this.canvasMouseMove)
    this.canvas.removeEventListener('mousedown', this.canvasMouseDown)
  }
  if (this.canvasContainer) {
    document.body.removeChild(this.canvasContainer)
  }
  window.removeEventListener('keydown', this.onKeyDown)
}

总结

有问题欢迎讨论👻