关于前端:在Chrome浏览器中最快速实现拾色器颜色吸管的方法

50次阅读

共计 2174 个字符，预计需要花费 6 分钟才能阅读完成。

说到网页拾色器（色彩吸管工具）在前端的实现办法，通常咱们会想到先进行 网页截图 ，而后通过Canvas 绘制截图，此时利用 Canvas 所提供的的 API 即可解析出图片每个像素点色彩，最初通过获取 鼠标定位，失去以后的坐标来进行色彩抉择。

在这种形式下通常问题出在第一个步骤，就是进行 网页截图 的办法，在前端网页截图常见的工具有：html2canvas、dom-to-image 等，然而这些库的实现原理都是通过解析 DOM 而后转换语法（Canvas 或 Svg）绘制再导出图片，尽管这是目前实现截图操作的惟一前途，但咱们要分明的是这样做不可避免会呈现以下问题：

对于简单网页场景解析可能会呈现缺失或谬误
无奈防止 Canvas 或 Svg 的渲染后果与网页出现成果存在差别的问题
生成效率太慢，解析绘制过程会造成卡顿，十分影响用户体验

所以基于此思路做进去的色彩吸色器只管在设计初期就思考可用性，也依然无奈防止上述问题，最多只能利用于简略网页的场景当中，但这通常又与事实相违反——因为简略的网页往往极少有应用到吸色器的业务场景。

如果说 JS 的实现办法是令人丧气的，那么把问题交给浏览器原生办法可能是将来最好的解决方案之一，事实上原生 HTML 早已提供了一种实现色彩抉择的元素，它就是咱们所相熟的 input 标签。

<input type="color">元素 是<input>元素中的一个特定品种，用来创立一个容许用户应用色彩选择器，或输出兼容 CSS 语法的颜色代码的区域。（不反对 Alpha 通道）

此元素的外观会因浏览器不同而不同，可能是简略的验证色彩输出格局的文本框，也可能应用平台原生或自定义款式的色彩选择器。其 UI 除要能接管文本格式的色彩外，未要求其余个性。（更多信息）

对于 ” 元素的外观会因浏览器不同而不同 ”，先给大家感触下 Safari 下显示成果，须要额定点击“显示色彩”调出零碎调色盘，十分的顺当：

然而 谷歌浏览器 下的实现体验曾经十分好了：

能够看到原生形式下的吸管工具都是 零碎级别 的，也就是说除了网页上的色彩以外，整个屏幕的任何可见元素 都能够汲取，而且启动速度十分快，应用晦涩不卡顿。

我在第一次理解该元素时就在想：如果这个原生吸管工具能够独自拿进去用就好了，这样能够通过本人开发一个色彩选择器来补救原生色彩选择器不反对 Alpha 通道的毛病，而原生吸管工具则能够解决目前 JS 很难实现吸色的问题。于是搜寻一番后发现真的有一个 BOM 的构造函数：EyeDropper()，它反对创立吸管工具的实例，以提供用户可应用的色彩抉择工具。

留神：该性能仍是一项实验性技术，请审慎在生产环境中应用，另外如果部署到线上发现生效，请查看站点是否已开启 HTTPS，如不在平安上下文环境中，无论浏览器是否反对该办法都不会失效（本地开发环境仿佛不受影响）。

以 Vue 为例，咱们能够像这样编写一个最简略的 Demo

<template>
    <button v-if="hasEyeDrop" @click="nativePick"> 点击取色 </button>
    <input v-else type="color" @input="nativePick" />
</template>

<script>
export default {data() {
    return {hasEyeDrop: 'EyeDropper' in window};
  },
  methods: {async nativePick (e){
     const val =  e ? e.target.value : null
      if (val) {console.log('取得色彩:' + val)
      } else {const eyeDropper = new window.EyeDropper() // 初始化一个 EyeDropper 对象
        console.log('按 Esc 可退出')
        try {const result = await eyeDropper.open() // 开始拾取色彩
          console.log('取得色彩:' + result.sRGBHex)
        } catch (e) {console.log('用户勾销了取色')
        }
      }
    }
  },
};
</script>

当然咱们还能够让原生吸色器补足取色性能的同时，自定义一个透明度滑块来反对扭转色值 Alpha 通道，实现更简单的利用场景：

目前该办法在兼容性方面只有 Chrome、Edge、Opera 这三个浏览器在全力支持，所以适用范围并不宽泛，然而因为其在谷歌浏览器上体验切实优良，还是十分举荐在必要时尽可能应用它，真的太香了！

另外提一嘴，我感觉在 Electron 中该当是十分符合的，尽管 Electron 有打包体积过大的毛病，但这个毛病也意味着它领有相对管制浏览器版本的权力，所以能释怀地应用新个性，通过它就能够在桌面程序中用三两行代码便当地实现一个晦涩的屏幕取色器了！