当前位置: 首页 > news >正文

Vue 3: 通过图片链接获取图片颜色,间接设置背景颜色

       在现代Web开发中,动态获取和处理图像数据是一个常见的需求。例如,你可能希望自动提取一张图片的主色调,以便根据这些颜色进行UI主题调整或其他视觉效果的处理。本文将介绍如何在Vue 3项目中,通过一个图片链接获取图片的颜色信息。

适用场景:设置背景色(例如:根据音乐图片设置主题色)
案例地址:(音乐模块的歌词)

天梦星科技官网icon-default.png?t=O83Ahttps://tmxkj.top/#/music案例截图:

1.废话不多说直接上代码(代码已经封装好,直接调用即可)

async function analyzeImageColors(imageUrl) {try {const image = new Image();image.crossOrigin = 'Anonymous'; // This is important for CORS issuesimage.src = imageUrl;await new Promise((resolve, reject) => {image.onload = () => resolve();image.onerror = (err) => reject(err);});const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = image.width;canvas.height = image.height;context.drawImage(image, 0, 0, image.width, image.height);const imageData = context.getImageData(0, 0, image.width, image.height).data;return getColorsFromImageData(imageData, image.width, image.height);} catch (error) {console.error('Error analyzing image:', error);return null;}
}/*** 获取图片颜色* @param imageData* @param width* @param height* @description 颜色分别是四个角是颜色,中间是颜色,主体颜色,平均颜色,一共七个颜色* @returns {{* middleColors: string[]* average: string,* corners: (string|null)[],* dominant: null,* secondDominant: null* }}*/
function getColorsFromImageData(imageData, width, height) {const colorCount = {};let r = 0, g = 0, b = 0;let totalPixels = width * height;// Initialize corner colors and middle color arraysconst corners = [null, null, null, null];const middleColors = [];for (let i = 0; i < imageData.length; i += 4) {const red = imageData[i];const green = imageData[i + 1];const blue = imageData[i + 2];const alpha = imageData[i + 3];if (alpha === 0) continue; // Skip transparent pixelsconst colorKey = `${red},${green},${blue}`;if (!colorCount[colorKey]) {colorCount[colorKey] = 0;}colorCount[colorKey]++;r += red;g += green;b += blue;// Determine if the pixel is a corner or middle pixelconst x = (i / 4) % width;const y = Math.floor((i / 4) / width);if (x === 0 && y === 0) {corners[0] = colorKey;} else if (x === width - 1 && y === 0) {corners[1] = colorKey;} else if (x === 0 && y === height - 1) {corners[2] = colorKey;} else if (x === width - 1 && y === height - 1) {corners[3] = colorKey;} else if (x === Math.floor(width / 2) && y === Math.floor(height / 2)) {middleColors.push(colorKey);}}// Find the dominant and second dominant colorslet dominantColor = null;let secondDominantColor = null;let maxCount = 0;let secondMaxCount = 0;for (const [color, count] of Object.entries(colorCount)) {if (count > maxCount) {secondMaxCount = maxCount;secondDominantColor = dominantColor;maxCount = count;dominantColor = `rgba(${color})`;} else if (count > secondMaxCount) {secondMaxCount = count;secondDominantColor = `rgba(${color})`;}}// Calculate average colorconst averageColor = `rgba(${Math.round(r / totalPixels)}, ${Math.round(g / totalPixels)}, ${Math.round(b / totalPixels)})`;return {corners: corners.map(color => color ? `rgba(${color})` : null),middleColors: middleColors.map(color => `rgba(${color})`),dominant: dominantColor,secondDominant: secondDominantColor,average: averageColor,};
}/*** 创建渐变色180deg* @param mainColor   1主色* @param topRight    2右上角颜色* @param center      3中心颜色* @param bottomRight 4右下角颜色* @param deg         5径向,默认180deg* @returns {string} 返回渐变色字符串*/
function createRadialGradient(mainColor,topRight,center,bottomRight,deg=180) {return `background: ${mainColor};background: linear-gradient(${deg}deg, ${topRight} 0%,${center}  50%, ${bottomRight} 100%);`
}export {analyzeImageColors,createRadialGradient
};

2.调用方法

/*** 设置背景颜色* @param url* @returns {Promise<string|string>}*/
function setBackgroundColor(url) {analyzeImageColors(url ||  'https://ts3.cn.mm.bing.net/th?id=OIP-C.8tlwbGsJvlNZwGAGL36W8AHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2').then(res => {backgroundStyle.value = createRadialGradient(res.dominant, res.corners[1], res.middleColors, res.corners[3]) || '';})
}

相关文章:

Vue 3: 通过图片链接获取图片颜色,间接设置背景颜色

在现代Web开发中&#xff0c;动态获取和处理图像数据是一个常见的需求。例如&#xff0c;你可能希望自动提取一张图片的主色调&#xff0c;以便根据这些颜色进行UI主题调整或其他视觉效果的处理。本文将介绍如何在Vue 3项目中&#xff0c;通过一个图片链接获取图片的颜色信息。…...

opencv-python的简单练习

题目1.读取一张彩色图像并将其转换为灰度图。 import cv2 # 读取图片文件 img cv2.imread(./1.png)# 将原图灰度化 img_gray cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)# 输出图片 cv2.imshow(img,img) cv2.imshow(img_g,img_gray) # 进行阻塞 cv2.waitKey(0) 题目2&#xff1a;…...

如何使用生成式AI实现跨领域内容生成

文章目录 引言生成式AI的基本概念定义与分类技术发展现状 跨领域内容生成的技术实现数据准备模型选择与设计训练策略 应用案例分析教育培训新闻媒体文化创意产业 实践建议确定明确的目标构建合适的团队持续迭代改进遵守法律法规 结论 引言 在当今数字化时代&#xff0c;信息的…...

【Linux】socket编程1

socket编程1 1. 网络字节序2. ip地址转换函数3. sockaddr数据结构 1. 网络字节序 多字节数据有大端和小端之分&#xff0c;网络数据流采用大端字节序&#xff0c;如果主机采用的是小端字节序&#xff0c;那么需要转换。 大端&#xff1a;低地址存高字节&#xff0c;高地址存低…...

Linux文件属性 --- 七种文件类型---文件.目录、软硬链接、字符设备文件

目录 七种文件类型 1、普通文件和目录 2、链接文件 2.1硬链接 2.2软链接 3、字符设备文件 一、七种文件类型 Linux的文件属性中一共有以下七种类型 &#xff1a; 符号类型含义解释-普通文件纯文本文件&#xff08;ASCII&#xff09;和二进制文件&#xff08;binary&#xff…...

Tree-of-Counterfactual Prompting for Zero-Shot Stance Detection

论文地址&#xff1a;Tree-of-Counterfactual Prompting for Zero-Shot Stance Detection - ACL Anthologyhttps://aclanthology.org/2024.acl-long.49/ 1. 概述 立场检测被定义为对文本中立场态度的自动推断。根据 Biber 和 Finegan (1988) 的定义&#xff0c;立场包含两个主…...

NextJs 路由管理

NextJs 路由管理 Defining Routes 1. Creating Routes 2. Creating UI export default function Page() {return <h1>Hello, Next.js!</h1> }Route Groups 路由组 1. 在不影响 URL 路径的情况下组织路由 要在不影响 URL 的情况下组织路由&#xff0c;请创建一…...

hive 小文件分析

1、获取fsimage文件&#xff1a; hdfs dfsadmin -fetchImage /data/xy/ 2、从二进制文件解析&#xff1a; hdfs oiv -i /data/xy/fsimage_0000000019891608958 -t /data/xy/tmpdir -o /data/xy/out -p Delimited -delimiter “,” 3、创建hive表 create database if not exists…...

【JavaWeb后端学习笔记】WebSocket通信

WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c;并进行双向数据传输。 主要应用场景&#xff1a;视频弹幕、网页聊天、体育实况更新、股票基金报价实时…...

搭建springmvc项目

什么是springmvc MVC它是一种设计理念。把程序按照指定的结构来划分: Model模型 View视图 Controller控制层 springmvc框架是spring框架的一个分支。它是按照mvc架构思想设计的一款框架。 springmvc的主要作用: 接收浏览器的请求数据&#xff0c;对数据进行处理&#xff0c;…...

Springboot3.x配置类(Configuration)和单元测试

配置类在Spring Boot框架中扮演着关键角色&#xff0c;它使开发者能够利用Java代码定义Bean、设定属性及调整其他Spring相关设置&#xff0c;取代了早期版本中依赖的XML配置文件。 集中化管理&#xff1a;借助Configuration注解&#xff0c;Spring Boot让用户能在一个或几个配…...

java后端环境配置

因为现在升学了&#xff0c;以前本来想毕业干java的&#xff0c;很多java的环境配置早就忘掉了&#xff08;比如mysql maven jdk idea&#xff09;&#xff0c;想写个博客记录下来&#xff0c;以后方便自己快速搭建环境 JAVA后端开发配置 环境配置jdkideamavenMySQLnavicate17…...

手眼标定工具操作文档

1.手眼标定原理介绍 术语介绍 手眼标定&#xff1a;为了获取相机与机器人坐标系之间得位姿转换关系&#xff0c;需要对相机和机器人坐标系进行标定&#xff0c;该标定过程成为手眼标定&#xff0c;用于存储这一组转换关系的文件称为手眼标定文件。 ETH&#xff1a;即Eye To …...

WebGIS城市停水及影响范围可视化实践

目录 前言 一、相关信息介绍 1、停水信息的来源 2、停水包含的相关信息 二、功能简介 1、基础小区的整理 2、停水计划的管理 三、WebGIS空间可视化 1、使用到的组件 2、停水计划的展示 3、影响小区的展示 4、实际效果 四、总结 前言 城市停水&#xff0c;一个看似…...

无管理员权限 LCU auth-token、port 获取(全网首发 go)

一&#xff1a; 提要&#xff1a; 参考项目&#xff1a; https://github.com/Zzaphkiel/Seraphine 想做一个 lol 查战绩的软件&#xff0c;并且满足自己的需求&#xff08;把混子和大爹都表示出来&#xff09;&#xff0c;做的第一步就是获取 lcu token &#xff0c;网上清一色…...

【数字花园】数字花园(个人网站、博客)搭建经历教程

目录 写在最最前面数字花园的定义第一章&#xff1a;netlify免费搭建数字花园相关教程使用的平台步骤信息管理 第二章&#xff1a;本地部署数字花园数字花园网站本地手动部署方案1. 获取网站源码2.2 安装 Node.js 3. 项目部署3.1 安装项目依赖3.2 构建项目3.3 启动http服务器 4…...

python模拟练习第一期

问题一 如果一个数 p 是个质数&#xff0c;同时又是整数 a的约数&#xff0c;则 p 称为 a的一个质因数。 请问 2024 有多少个质因数&#xff1f; 步骤 1: 分解 2024 首先&#xff0c;2024 是偶数&#xff0c;说明可以被 2 整除。我们从 2 开始进行除法分解&#xff1a; 202…...

Xcode

info.plist Appearance Light 关闭黑暗模式 Bundle display name 设置app名称&#xff0c;默认为工程名 Location When In Use Usage Description 定位权限一共有3个key 1.Privacy - Location When In Use Usage Description 2.Privacy - Location Always and When In U…...

RabbitMQ安装延迟消息插件(mq报错)

之前启动一个springboot的单体项目&#xff0c;一直mq的错误&#xff0c;即便我更新了最新版本的mq&#xff0c;还是报错。 后来才发现&#xff0c;项目使用了延时队列&#xff0c;是需要单独下载延时插件的。 1如果判断mq有没有延时队列插件【没有x-delayed-message】 2下载…...

es 3期 第15节-词项查询与跨度查询实战运用

#### 1.Elasticsearch是数据库&#xff0c;不是普通的Java应用程序&#xff0c;传统数据库需要的硬件资源同样需要&#xff0c;提升性能最有效的就是升级硬件。 #### 2.Elasticsearch是文档型数据库&#xff0c;不是关系型数据库&#xff0c;不具备严格的ACID事务特性&#xff…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...