当前位置: 首页 > 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…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...