Chrome浏览器中颜色选择器（颜色吸管）的最快实现方法

说到前端网页颜色选择器（颜色吸管工具）的实现，我们通常会想到截图首先是网页，然后通过CanvasScreenshot绘制出来，这时利用Canvas提供的API来分析图片中每个像素点的颜色，最后通过获取鼠标位置选择颜色来获取当前坐标。这样一来，问题通常出在第一步，也就是网页截图的方法。前端网页截图常用的工具有：html2canvas、dom-to-image等，但是这些库的实现原理都是通过解析DOM然后转换语法（Canvas或者Svg）来绘制然后导出图片。虽然这是目前实现截??图操作的唯一方式，但我们必须清楚，这种方式不可避免地会出现以下问题：对于复杂的网页场景分析，可能存在遗漏或错误渲染结果无法避免Canvas或Svg与网页的渲染效果不同。生成效率太慢，解析绘制过程会造成卡顿，极大影响用户体验。因此，在设计初期就考虑了基于这种思路的颜色吸收体。可用性仍然无法避免上述问题，最多只能应用于简单的网页场景，但这通常与事实相悖——因为简单的网页往往很少有使用颜色吸收器的业务场景。Native解决方案如果JS的实现方法令人沮丧，那么将问题交给浏览器的native方法可能是未来最好的解决方案之一。其实原生HTML已经提供了颜色选择的元素，也就是我们熟悉的input标签。元素是一种特殊的元素，用于创建允许用户使用颜色选择器或输入与CSS语法兼容的颜色代码的区域。（不支持Alpha通道）此元素的外观因浏览器而异，可能是验证颜色输入格式的简单文本框，也可能使用平台原生或自定义样式的颜色选择器。它的UI除了能够接受文本格式的颜色外，不需要其他功能。（更多信息）关于“元素的外观会因浏览器不同而不同”，先让大家体验一下Safari下的显示效果，需要点击“显示颜色”调出系统调色板，很别扭：但是谷歌浏览器下的实现体验已经很好了：可以看到native模式下的滴管工具是系统级的，也就是说除了网页上的颜色，任何整个屏幕可见元素都可以拾取，启动速度很快，使用流畅不卡顿。刚开始了解这个元素的时候，我在想：如果这个原生的吸管工具可以单独使用就好了，这样我就可以开发一个颜色选择器来弥补原生颜色选择器不支持的缺点Alpha通道，以及原生的吸管工具，可以解决目前JS难以实现颜色吸收的问题。于是经过一番查找，发现还真有一个BOM构造函数：EyeDropper()，它支持创建滴管工具的实例，提供给用户使用的颜色选择工具。注意：该功能仍为实验技术，请在生产环境中谨慎使用。另外，如果上线部署失败，请检查站点是否启用了HTTPS。如果不在securitycontext中，无论浏览器是否支持，方法都不起作用（本地开发环境似乎不受影响）。以Vue为例，我们可以这样写一个最简单的Demo当然我们也可以让原生的颜色选择器补充颜色选择器的功能，自定义一个透明度滑块，支持改变颜色值的alpha通道，实现更多complexapplicationsScenarios：适用场景目前该方法在兼容性方面只有Chrome、Edge、Opera完全支持，因此适用范围并不广，但由于其在谷歌浏览器上的体验极佳，强烈推荐必要时尽可能使用它，真的闻起来真香！另外，我觉得应该是很适合Electron的。Electron虽然有封装体积过大的缺点，但这个缺点也意味着它拥有绝对的浏览器版本控制权，可以放心使用新特性。通过它，你可以方便的在桌面程序中用三两行代码实现一个流畅的屏幕取色器！以上就是文章的全部内容，希望对大家有所帮助！觉得文章写得好，可以点赞收藏。也欢迎您关注。我会持续更新更多有用的前端知识和实用技巧。一日茶无味，愿与你共同成长~