技术派图片背景色动态变更
选中新版正文中的对应文字，然后点“定位到这里”。
大家好，我是二哥呀。今天由我来给大家分享一个小的知识点《技术派是如何实现根据图片自动修改背景色的》，这个看似简单的一个功能，但给用户的体验却是极好的。
你看，现在是根据第一张图的颜色提取的背景色，对吧，偏黄一点的颜色（怎么感觉说出来有点怪怪的 dog），呈现出一种温暖、明亮的感觉。
当点击菜单跳转到后端的分类下时，背景色就发生变化了，一种靠近蓝绿色（turquoise）的颜色，呈现出一种清新、宁静的感觉。
如果你恰好在经营一个网站，或者你的毕设/个人博客，完全可以把这个功能加进去，会让用户/面试官/HR 有一种耳目一新的感觉。
那这一点是怎么实现的呢？
关于 ColorThief
这源于我们使用了一款 JavaScript 库——ColorThief，它可以从图像中提取主要颜色和颜色调色板。
目前在 GitHub 上已经有 11.5k 的 star 了，非常受欢迎。
它可以把一张图片上的调色板调出来，比如说《二哥的 Java 进阶之路》封面上的色调。
整合 ColorThief
ColorThief 提供了多种方式，可供 node.js 或者通用（UMD，Universal Module Definition）的 JavaScript 环境使用。
①、node.js 的使用方式如下：
先安装。
npm i --save colorthief
再导入。
const ColorThief = require('colorthief');
②、CDN 引入的方式。
③、GitHub 下载到本地再引入的方式。
技术派采用的是第 3 种方式，主要是这个文件也非常小，也就 7 kb...
未能定位到原文的划线
已加入星球，可直接知识星球授权登录
二哥编程星球目前包含：
企业级Agent工作流编排项目PaiFlow
Vibe Coding版本的PaiAgent
派聪明RAG AI知识库Java版本+Go版本
微服务 PmHub、技术派、MYDB
求职派JobClaw（OpenClaw/Hermes架构
PaiCLI（类似Claude Code的Agent
派简历（代码已完成）
等实战项目。
企业级Agent工作流编排项目PaiFlow
Vibe Coding版本的PaiAgent
派聪明RAG AI知识库Java版本+Go版本
微服务 PmHub、技术派、MYDB
求职派JobClaw（OpenClaw/Hermes架构
PaiCLI（类似Claude Code的Agent
派简历（代码已完成）
等实战项目。
1. 微信扫右侧的优惠券加入知识星球
2. 解锁星球的实战项目教程和源码： 项目源码+教程获取
真诚点赞 诚不我欺
回复