3行代码,实现一个取色器

前言

今天发现了一个很好玩的 API ——EyeDropper。

EyeDropper API 提供了一种创建拾色器工具的机制。使用该工具,用户可以从屏幕上取样颜色,包括浏览器窗口之外的区域

这是 MDN 上对它的介绍,可以取包括浏览器窗口之外的区域。我们一起看看是怎么个事

什么是取色器

取色器,可能有一些地方会被称为拾色器。它指的是一种从应用窗口的某些部分甚至整个屏幕中选择颜色的工具。

我不知道各位有没有遇到过这种情况:产品/业务随便丢过来一张图,让我们把页面抄成这个样子,但是图里的各个元素是什么颜色呀?这个时候他们可能就会让你去找一个取色器自己取一下看看,听起来很离谱,但是我遇到过。这也是取色器的一种使用场景吧。

image.png

在取色器打开时,会出现一个类似放大镜的效果。移动到希望取色的位置时,鼠标左键点下,就可以获取到当前坐标的一个颜色。当然你也可以通过 Esc 键提前退出取色器模式。

input

其实在这个 API 出现之前,浏览器已经有一种取色器的解决方案,那就是 input 标签。我们可以通过这样一行代码来实现一个取色器

<input type="color"/>

image.png

在点击这个画笔的时候,我们就可以使用一个取色器。但是如果采用这种方式来开发一个取色器的应用,还是得重新定义覆盖它的 CSS 样式。

<

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/600348.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

24年最新AI数字人简单混剪

24年最新AI数字人简单混剪 网盘自动获取 链接&#xff1a;https://pan.baidu.com/s/1lpzKPim76qettahxvxtjaQ?pwd0b8x 提取码&#xff1a;0b8x

【C 数据结构-图】2. 图的存储结构

文章目录 【 1. 图的顺序存储结构 】1.1 基本原理1.2 顺序存储结构的 C 实现 【 2. 图的链式存储结构 】2.1 图的临接表存储结构2.1.1 临接表的 基本原理2.1.2 临接表的 链表节点2.1.3 邻接表 各结构体的C实现2.1.4 临接表 计算顶点的出度和入度邻接表计算 无向图的出度和入度邻…

【Fastadmin】后台角色组权限问题(multi,开关switch,控制器新增方法)

1.列表开关类型的权限 如图&#xff1a; 此类开关请求的方法为multi 开关在点击的时候默认是只允许修改数据库的status字段的&#xff0c;如果我们开关不是status字段&#xff0c;我们需要在服务端对应的控制器中定义protected $multiFields"id,name,swith";&#x…

一个物业管理服务项目的思考——智慧停车场无人值守呼叫系统到电梯五方对讲再到呼叫中心

目录 起源智慧停车场无人值守呼叫系统然后电梯五方对讲系统又然后物业呼叫中心集控E控中心怎么做 起源 小区里新装了智慧停车场系统&#xff0c;马上展现出了科技化、现代化的新形象。一个显著的好处是&#xff1a;停车场的出入口&#xff0c;再也看不到司机和保安争吵的场景了…

四川景源畅信:抖音的运营策略有哪些?

在数字营销的大潮中&#xff0c;抖音以其巨大的用户基础和强大的传播力成为众多品牌和商家的必争之地。那么&#xff0c;抖音的运营策略有哪些呢?这个问题涉及到内容创作、用户互动、数据分析和品牌合作等多个方面。 一、内容创作与优化在抖音&#xff0c;内容是吸引用户的关键…

C++ 数据内存分布揭秘:从栈到堆的探索之旅

目录 1. 栈(Stack) 2. 堆(Heap) malloc和new的区别 堆与栈在C中的异同点详解 3. 数据段(Data Segment) 4. 代码段(Code Segment) 5. 动态内存分配的陷阱 当我们谈论C编程时&#xff0c;对内存布局的理解至关重要。本文将深入探讨C中各种变量和数据结构在内存中的分布情况…

这些CTF,不仅学技术,还有巨额奖金!

前言&#xff1a; 不会吧&#xff0c;不会吧&#xff0c;不会还有安全er不知道CTF是什么吧&#xff1f; 在程序员的世界里&#xff0c;也有ACM这样的编程大赛&#xff0c;成为各路编程高手一较高下展示能力的平台。 那在网络安全的圈子里&#xff0c;各路黑客红客白帽子们又…

rag-embeddings基础流程

什么是检索增强的生成模型 LLM 固有的局限性 LLM 的知识不是实时的LLM 可能不知道你私有的领域/业务知识 检索增强生成 RAG&#xff08;Retrieval Augmented Generation&#xff09;顾名思义&#xff0c;通过检索的方法来增强生成模型的能力。 类比&#xff1a;你可以把这个…

linux 内核编译

目录 Linux操作系统框架 Linux内核的主要功能&#xff1a; Linux的内核目录结构&#xff1a; 结构图: 详细介绍&#xff1a; uname - a 补充 编译之前 UTC 时间补充 Linux内核编译流程: 方法一: 官方内核编译: 1. 运行 build.sh 脚本&#xff0c; 记得加 sudo 权…

Day 24 数据库管理及数据类型

数据库管理及数据类型 一&#xff1a;数据类型 1.数值类型 整数类型 ​ 整数类型&#xff1a;TINYINT SMALLINT MEDIUMINT INT BIGINT ​ 作用&#xff1a;用于存储用户的年龄、游戏的Level、经验值等 浮点数类型 ​ 浮点数类型&#xff1a;FLOAT DOUBLE ​ 作用&#xf…

linux或ubuntu环境下需要自行安装vivado USB Program下载程序驱动

如果在linux或ubuntu环境下&#xff0c;不安装驱动是无法下载FPGA程序的。在linux或ubuntu环境下安装程序不要自动安装。 johnjohn-wang:~/vitis2021.2/Vivado/2021.2/data/xicom/cable_drivers/lin64/install_script/install_drivers$ sudo ./install_drivers

1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求

1.Axios的使用 Axios中文文档 | Axios中文网Axios 是一个基于 promise 的网络请求库&#xff0c;可以用于浏览器和 node.jshttps://www.axios-http.cn/ 2.与vue整合 App.vue: <template><div id"app"><Moviev-for"movie in movies":key&qu…

一致性评价政策加速行业仿制药洗牌,惯爱为代表的新锐品牌崭露头角

从印度神油到以形补形&#xff0c;男人的问题&#xff0c;从古至今一直困扰着很多人&#xff0c;大多人都羞于启齿。然而&#xff0c;沉默的背后&#xff0c;隐藏着令人震惊的数据&#xff1a;据统计显示&#xff0c;ED&#xff08;勃起功能障碍&#xff09;是男性生殖系统发病…

9.Java内置锁的核心原理-Synchronized

文章目录 Java内置锁的核心原理-Synchronized1.线程安全问题1.1.自增运算分析1.2.临界区资源和临界区代码片段 2.synchronized关键字2.1.synchronized同步方法2.2.synchronized同步代码块2.3.synchronized同步方法和synchronized同步代码块区别2.4.静态的同步方法2.5.内置锁的释…

18、ESP32 ESP-NOW 点对点通信

ESP-NOW 是乐鑫自主研发的无连接通信协议&#xff0c;具有短数据包传输功能。该协议使多个设备能够以简单的方式相互通信。 ESP-NOW 功能 ESP-NOW 支持以下功能&#xff1a; 加密和未加密的单播通信;混合加密和未加密的对等设备;最多可携带 250 字节 的有效载荷;发送回调功能…

C#修改默认参数settings文件

右击项目在设置中进行修改&#xff1a; 千万不要在这里改。 如果要在自己的项目里添加这个文件&#xff0c;首先新建个文件夹&#xff0c;然后添加.setting文件&#xff0c;然后再像上面说的那样添加属性。

通过 Java 操作 redis -- String 基本命令

关于 redis String 类型的相关命令推荐看 Redis - String 字符串 要想通过 Java 操作 redis&#xff0c;首先要连接上 redis 服务器&#xff0c;推荐看通过 Java 操作 redis -- 连接 redis 本博客只介绍了一小部分常用的命令&#xff0c;其他的命令根据上面推荐的博客也能很简单…

Penpad再获 Presto Labs 投资,Scroll 生态持续扩张

​Penpad 是 Scroll 生态的 LaunchPad 平台&#xff0c;其整计划像收益聚合器以及 RWA 等功能于一体的综合性 Web3 平台拓展&#xff0c;该平台在近期频获资本市场关注&#xff0c;并获得了多个知名投资者/投资机构的支持。 截止到本文发布前&#xff0c;Penpad 已经获得了包括…

【免费】虚拟同步发电机(VSG)惯量阻尼自适应控制仿真模型【simulink】

目录 主要内容 仿真模型要点 2.1 整体仿真模型 2.2 电压电流双闭环模块 2.3 SVPWM调制策略 2.4 无功电压模块 2.5 自适应控制策略及算法 部分结果 下载链接 主要内容 该模型为simulink仿真模型&#xff0c;主要实现的内容如下&#xff1a; 随着风力发电、光…

4.请求体

什么是请求体(Request Body) 请求体是客户端发送到API的数据。 响应体是API发送给客户端的数据 API几乎总是必须发送一个响应体&#xff0c;但是客户端并不需要一直发送请求体 定义请求体&#xff0c;需要使用 Pydantic 模型 不能通过GET请求发送请求体发送请求体数据&…
最新文章