前端取图片相同颜色作为遮罩或者背景

需求

  • 遮罩层取图片相同/相似的颜色作为遮罩

效果

做法

npm库

grade.js

  • 所提供图像中前 2 个主色生成的互补渐变
  • https://github.com/benhowdle89/grade

COLOR THIEF

  • 只需使用Javascript即可从图像中获取调色板。

  • https://github.com/lokesh/color-thief

  • https://lokeshdhakar.com/projects/color-thief

rgbaster.js

  • https://github.com/briangonzalez/rgbaster.js
  • 一个非常简单、零依赖、基于 promise 的 javascript 库,用于从图像(在浏览器中)中提取主要颜色。

算法

  • 基本思路都是获取每一种rgb的出现次数,进行计算分析,如果出现跨域问题还需要后端配合解决

  • https://kuangyx.cn/docs/%E6%96%87%E7%AB%A0/%E5%89%8D%E7%AB%AF/%E6%8F%90%E5%8F%96%E5%9B%BE%E7%89%87%E4%B8%BB%E9%A2%98%E8%89%B2.html

  • 也可以直接使用这位大佬写好的

    • https://github.com/hubingliang/colorfulImg
    • 代码里面的colorfulImg

简单做法

做法1

  • 效果

  • 代码
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 原始图 --><div class="origin"></div><!-- 模糊 --><div class="mask"></div><style>div.origin {position: relative;width: 320px;height: 200px;overflow: hidden;background-repeat: no-repeat;background-image: url("https://oss.dreamlove.top/i/2024/02/20/xqsvvg.png");}div.mask{position: relative;width: 320px;height: 200px;overflow: hidden;/* 关键代码 */background-repeat: no-repeat;background-image: url("https://oss.dreamlove.top/i/2024/02/20/xqsvvg.png");background-size: 20000%;background-position: center;}</style></body>
</html>

参考文章

  • https://www.cnblogs.com/coco1s/p/14754188.html
  • https://www.zhangxinxu.com/wordpress/2014/08/image-dominant-color-get-rgbaster-js/
  • https://blog.csdn.net/weixin_64388392/article/details/134426851

后话

  • 其实简单做法里面的思路,也可以根据背景来设置字体颜色,大概思路就是字体颜色设置为透明,并利用background-clip进行设置

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DNS的意义,DNS不可用该怎么办

DNS是域名系统&#xff0c;它负责将我们输入的网址(如www.baidu.com)转换成计算机可以理解的IP地址(如127.0.0.1)。DNS设置的好坏&#xff0c;直接影响到我们的上网速度和体验。 一、DNS的重要性 在访问一个网站时&#xff0c;首先需要通过DNS将域名解析为对应的IP地址。如果DN…

5.24 BCC工具之funccount.py解读

一,工具简介 funccount工具可以追踪与指定模式匹配的函数、追踪点或USDT探针,并会在追踪过程中打印它们的计数摘要。 二,代码示例 #!/usr/bin/env pythonfrom __future__ import print_function from bcc import ArgString, BPF, USDT from time import sleep, strftime …

【深度学习笔记】4_2-3 模型参数的访问、初始化和共享

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 4.2 模型参数的访问、初始化和共享 在3.3节&#xff08;线性回归的简洁实现&#xff09;中&#xff0c;我们通过init模块来初始化模型…

AIGC专栏9——Scalable Diffusion Models with Transformers (DiT)结构解析

AIGC专栏9——Scalable Diffusion Models with Transformers &#xff08;DiT&#xff09;结构解析 学习前言源码下载地址网络构建一、什么是Diffusion Transformer (DiT)二、DiT的组成三、生成流程1、采样流程a、生成初始噪声b、对噪声进行N次采样c、单次采样解析I、预测噪声I…

kitti数据显示

画出track_id publish_utils.py中 def publish_3dbox(box3d_pub, corners_3d_velos, types, track_ids):marker_array MarkerArray()for i, corners_3d_velo in enumerate(corners_3d_velos):marker Marker()marker.header.frame_id FRAME_IDmarker.header.stamp rospy.T…

Pytorch训练RCAN QAT超分模型

Pytorch训练RCAN QAT超分模型 版本信息测试步骤准备数据集创建容器生成文件列表创建文件列表的代码执行脚本,生成文件列表训练RCAN模型准备工作修改开源代码编写训练代码执行训练脚本可视化本文以RCAN超分模型为例,演示了QAT的训练过程,步骤如下: 先训练FP32模型再加载FP32训练…

量子计算学习经验

推荐B站冉仕举老师视频&#xff08;老师讲的详细又耐心&#xff0c;张量网络做量子计算&#xff0c;不过有些基础概念都是通用的&#xff09; StringCNU的个人空间-StringCNU个人主页-哔哩哔哩视频 2《量子计算与量子信息》是经典的教材书的&#xff0c;但是大部分同学第一次看…

【随笔】固态硬盘数据删除无法恢复(开启TRIM),注意数据备份

文章目录 一、序二、机械硬盘和固态硬盘的物理结构与工作原理2.1 机械硬盘2.11 基本结构2.12 工作原理 2.2 固态硬盘2.21 基本结构2.22 工作原理 三、机械硬盘和固态硬盘的垃圾回收机制3.1 机械硬盘GC3.2 固态硬盘GC3.3 TRIM指令开启和关闭 四、做好数据备份 一、序 周末电脑突…

数据库设计过程中的各种模式

在数据库设计过程中&#xff0c;有几种常见的模式&#xff0c;它们有助于组织和管理数据。以下是这几种模式的简介&#xff1a; 主扩展模式&#xff08;也称为主从模式&#xff09;&#xff1a;这种模式适用于多个表具有相似结构的情况。这些表共享某些基本属性&#xff08;也…

备战蓝桥之二分

二分题目&#xff1a; B3880 [信息与未来 2015] 买木头 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.security.PublicKey; impor…

【Qt学习】QLineEdit 控件 属性与实例(登录界面,验证密码,正则表达式)

文章目录 1. 介绍2. 实例使用2.1 登录界面2.2 对比两次密码是否相同2.3 通过按钮显示当前输入的密码&#xff08;并对2.2进行优化&#xff09;2.4 结语 3. 正则表达式3.1 QRegExp3.2 验证输入内容 4. 资源代码 1. 介绍 关于 QLineEdit 的详细介绍&#xff0c;可以去查阅官方文…

[计算机网络]--IP协议

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、IP协议…

202432读书笔记|《泰戈尔的诗》——什么事让你大笑,我生命的小蓓蕾

202432读书笔记|《泰戈尔的诗》——什么事让你大笑&#xff0c;我生命的小蓓蕾 《泰戈尔写给孩子的诗&#xff08;中英双语版&#xff09;》作者拉宾德拉纳特泰戈尔文 张王哲图&#xff0c;图文并茂的一本书&#xff0c;文字与图画都很美&#xff0c;相得益彰&#xff01;很值得…

【Memory协议栈】EEPROM Abstraction模块详细介绍

目录 前言 正文 1.功能简介 2.关键概念 3.功能详解 3.1 Addressing scheme and segmentation 3.2 Address calculation 3.3 Limitation of erase / write cycles 3.4 Handling of “immediate” data 3.5 Managing block consistency information 4.关键API定义 4.…

学习磁盘管理

文章目录 一、磁盘接口类型二、磁盘设备的命名三、fdisk分区四、自动挂载五、扩容swap六、GPT分区七、逻辑卷管理八、磁盘配额九、RAID十、软硬链接 一、磁盘接口类型 IDE、SATA、SCSI、SAS、FC&#xff08;光纤通道&#xff09; IDE, 该接口是并口。SATA, 该接口是串口。SCS…

Linux笔记--文件内容的查阅与统计

一、文件内容的查阅 1.cat指令 concatenate&#xff0c;连接文件并打印到标准输出设备上(查看文件) &#xff08;1&#xff09; #cat文件的路径 常用选项: -n列出行号 &#xff08;2&#xff09;#tac 含义:倒序显示&#xff08;应用:查看日志) 2. head指令 查看一个文件的前n行…

golang学习2,golang开发配置国内镜像

go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct

npm已经配置淘宝源仍然无法使用

使用npm命令安装Taro框架的时候&#xff0c;尽管已经设置淘宝源但是仍然无法下载&#xff0c;提示错误 >npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/cnpm failed, reason: certificate h…

K8S部署Java项目(Gitlab CI/CD自动化部署终极版)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

websocket入门及应用

websocket When to use a HTTP call instead of a WebSocket (or HTTP 2.0) WebSocket 是基于TCP/IP协议&#xff0c;独立于HTTP协议的通信协议。WebSocket 是双向通讯&#xff0c;有状态&#xff0c;客户端一&#xff08;多&#xff09;个与服务端一&#xff08;多&#xff09…