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

微信小程序根据图片生成背景颜色有效果图

news 来源：原创 2025/7/4 22:50:50

效果图

请添加图片描述
取得是图片中间10个像素算出背景颜色

.wxml

<canvas type="2d" id="imageCanvas" style="--w: {{w}}px;--h: {{h}}px;" />
<view style="background: {{backgroundColor}};"><image bind:tap="updateIndex" data-index="{{index}}" wx:for="{{image}}" wx:key="index" src="{{item}}" mode="aspectFill" style="{{select === index?'border:2px solid red;':''}}" />
</view>

.wxss

canvas{visibility: hidden;position: absolute;z-index: -1;width: var(--w);height: var(--h);left: var(--w);top: calc(var(--w) * -1);
}
view{height: 100vh;text-align: center;transition: all 0.5s;
}
image{width:300rpx;height:300rpx;margin: 30rpx 30rpx 0;box-sizing: border-box;
}

.js

Page({data:{w:0,h:0,image:['https://c-ssl.dtstatic.com/uploads/blog/202402/27/1mS1Nve5iQqnQpN.thumb.400_0.jpg','https://c-ssl.dtstatic.com/uploads/blog/202402/23/aLS3821yt0BE1yW.thumb.400_0.jpeg','https://c-ssl.dtstatic.com/uploads/blog/202402/25/lGSgwXVEhxOzbqx.thumb.400_0.jpeg','https://c-ssl.dtstatic.com/uploads/blog/202402/27/lGS1anBpixO7xG3.thumb.400_0.jpg',],select:0},onLoad(options) {this.getColor()},updateIndex(e){this.setData({select:e.currentTarget.dataset.index})this.getColor()},getColor(){var that = thisconst src = that.data.image[that.data.select]that.getImageData(src, pixels => {const mainColor = that.MainColor(pixels);that.setData({backgroundColor: `rgb(${mainColor[0]}, ${mainColor[1]}, ${mainColor[2]})`,});});},getImageData(src, fn) {var that = thiswx.getImageInfo({src,success(res) {const { width, height } = res;that.setData({w:width,h:height})wx.createSelectorQuery().select('#imageCanvas').fields({ node: true, size: true }).exec((rect) => {const canvas = rect[0].nodeconst ctx = canvas.getContext('2d')canvas.width = widthcanvas.height = heightconst image = canvas.createImage()image.src = srcimage.onload = () => {ctx.drawImage(image,0,0,width,height)const x = (width - 10) / 2 | 0,y = (height - 10) / 2 | 0const o = ctx.getImageData(x, y, 10, 10)fn(o.data);};})},});},MainColor(pixels) {const colorFrequency = {};for (let i = 0; i < pixels.length; i += 4) {const red = pixels[i];const green = pixels[i + 1];const blue = pixels[i + 2];const key = `${red},${green},${blue}`;if (!colorFrequency[key]) {colorFrequency[key] = 0;}colorFrequency[key]++;}let mainColor = '';let maxCount = 0;Object.keys(colorFrequency).forEach(key => {if (colorFrequency[key] > maxCount) {maxCount = colorFrequency[key];mainColor = key.split(',').map(Number);}});return mainColor;},
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。

微信小程序根据图片生成背景颜色有效果图

效果图取得是图片中间10个像素算出背景颜色 .wxml <canvas type"2d" id"imageCanvas" style"--w: {{w}}px;--h: {{h}}px;" /> <view style"background: {{backgroundColor}};"><image bind:tap"updateIndex&qu…...

编程日记 2025/7/4 22:50:50

实时步数统计系统 kafka + spark +redis

基于微服务架构设计并实现了一个实时步数统计系统，采用生产者-消费者模式，利用Kafka实现消息队列，Spark Streaming处理实时数据流，Redis提供高性能数据存储，实现了一个高并发、低延迟的数据处理系统，支持多…...

编程日记 2025/7/4 22:09:55

使用 Docker 安装 SQL Server 2022 并解决 Navicat 连接问题

在使用 Docker 安装 SQL Server 时，很多人可能遇到过无法通过 Navicat 等数据库客户端连接到容器的情况。尤其是尝试使用 mcr.microsoft.com/mssql/server:2022-latest 镜像时，可能会发现 Navicat一直转圈，无法连接到数据库。在这篇博客中&am…...

编程日记 2025/6/29 12:09:31

使用 Node、Express 和 MongoDB 构建一个项目工程

本文将详细介绍如何使用 Node.js Express MongoDB 构建一个完整的 RESTful API 后端项目，涵盖： 项目初始化 Express 服务器搭建 MongoDB 数据库连接 REST API 设计（CRUD 操作） 错误处理与中间件源码结构与完整代码部署建…...

编程日记 2025/7/4 20:17:02

基本元器件电阻、电容、电感的高频知识和大厂真题解析

本文首先举例分析各个方向的工程师如何定制化准备硬件岗位面试，各个击破；然后根据实战经验总结硬件领域中电阻电容电感等的主要笔试、面试高频考题考点；最后，列出最新最全的基本元器件笔试面试的真题和模拟题，供大家参考。本专栏预计更新50期左右。当前第3期一、硬件…...

编程日记 2025/6/29 9:22:56

Unity InputSystem触摸屏问题

最近把Unity打包后的windows软件放到windows触摸屏一体机上测试，发现部分屏幕触摸点击不了按钮，测试了其他应用程序都正常。这个一体机是这样的，一个电脑机箱，外接一个可以触摸的显示屏，然后UGUI的按钮就间歇性点不了…...

编程日记 2025/6/29 11:02:54

分布式微服务架构,数据库连接池设计策略

在分布式微服务架构中，数据库连接池的设计远比单体应用复杂，涉及资源隔离、连接管理、性能调优和高可用等问题。下面是面向专业软件架构师的系统化分析与策略建议： 一、核心挑战每个服务独立运行，连接池分散每个微服务维护自己的…...

编程日记 2025/7/4 20:54:26

差分信号抗噪声原理：

差分信号抗噪声原理： 差分信号除了能很好地解决发送和接收参考点电位不同的问题外，差分信号的另一个重要优势就是在一定条件下其抗干扰能力比单端信号更强。对于单端信号传输，外界对它的干扰噪声直接叠加在信号上，接收端直接检测输…...

编程日记 2025/7/4 22:43:16

【数据分析】酵母实验多指标数据的 R 语言分析与可视化

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍加载必要的R包数据下载定义函数发育分析（development analysis）数据导入与预处理数据子集创建绘图模型分析两两比较生存分析（survival analysis）数据导入与预处理数据子集创建绘…...

编程日记 2025/7/4 22:19:12

AI | 最近比较火的几个生成式对话 AI

关注：CodingTechWork 引言生成式对话 AI 正在迅速改变我们与机器交互的方式，从智能助手到内容创作，其应用范围广泛且深远。本文将深入探讨几款当前热门的生成式对话 AI 模型，包括 Kimi、DeepSeek、ChatGPT、文心一言、通义千问和…...

编程日记 2025/7/4 22:24:58

将视频生成视频二维码步骤

如何将视频链接生成二维码生成与视频关联的二维码通常涉及以下几个方面：选择合适的库或工具、准备视频链接以及将其转换为二维码图像。以下是详细的说明： 使用JavaScript/Vue框架生成二维码在前端开发中，可以使用 qrcode 或者 vue-qrcod…...

编程日记 2025/6/29 19:37:06

以安科瑞 EMS3.0 为依托，打造网荷储充一体化典范

在“双碳”目标与能源革命的浪潮中，安科瑞电气股份有限公司推出的EMS3.0微电网智慧能源平台，以“源-网-荷-储-充”全链路协同为核心，通过物联网、大数据与AI技术的深度融合，为企业提供了一套智能化、高效化、低碳化的能源管理解决…...

编程日记 2025/6/29 11:09:34

堆和二叉树--数据结构初阶(3)(C/C++)

文章目录前言理论部分堆的模拟实现:(这里举的大根堆)堆的创建二叉树的遍历二叉树的一些其他功能实现作业部分前言这期的话讲解的是堆和二叉树的理论部分和习题部分理论部分二叉树的几个性质:1.对于任意一个二叉树，度为0的节点比度为2的节点多一个 2.对于完全…...

编程日记 2025/7/4 22:26:32

CLIP和SimCLR集成到图像-文本检索系统技术实现步骤和部署方案（代码版）

将 CLIP（多模态对比学习）和 SimCLR（单模态对比学习）集成到图像-文本检索系统（如搜索引擎、电子商务平台）的技术实现步骤和部署方案，结合代码示例与工程化思路： ### 一、技术实现核心步骤 1. 环境搭建与依赖安装 # 安装 PyTorch（支持 GPU 加速） pip install torch…...

编程日记 2025/7/4 20:29:54

R/G-B/G色温坐标系下对横纵坐标取对数的优势

有些白平衡色温坐标系会分别对横纵坐标取对数运算。这样做有什么优势呢？我们知道对数函数对0-1之间的因变量值具有扩展作用。即自变量x变化比较小时，经过对数函数作用后可以把因变量扩展到较大范围内，即x变化较小时，y变化较大，增加了识别数据的识别性。由于Raw数据中的…...

编程日记 2025/7/4 20:56:46

Java开发工具IntelliJ IDEA v2025.1——全面支持Java 24、整合AI

IntelliJ IDEA 是由 JetBrains 开发的智能 Java IDE，提供代码自动补全、重构工具、框架集成（Spring/JPA 等）、数据库工具和调试支持，通过深度代码分析与跨语言功能优化企业级开发流程，被广泛认可为专业 Java 开发者的高…...

编程日记 2025/7/4 20:15:08

IDEA启动报错Failed to create JVM. JVM path的解决办法

今天修改了 IntelliJ IDEA 2023.1 的配置文件 idea64.exe.vmoptions 后启动报错： if you already hava a JDK installed, define a JAVA_HOME variable in Computer > Systen Properties > System Settings > Environment Variables.Failed to create JV…...

编程日记 2025/7/4 20:25:03

R语言中的常用内置函数

常用的数值函数常用的字符函数与概率分布相关的函数有用的统计函数数据来源:《数据挖掘与数据分析：基于R语言》王阳 2024年1月出版...

编程日记 2025/6/29 9:21:49

docker容器监控自动恢复

关于实现对docker容器监控以及自动恢复，这里介绍两种实现方案。方案1： 实现思路： 找到（根据正则表达式）所有待监控的docker容器，此处筛选逻辑根据docker运行状态找到已停止（Exit）类…...

编程日记 2025/7/4 21:13:13

【记录手贱bug日常】IDEA 配置vmoptions后打不开，重新安装，删注册表均无用

今天早上来公司，闲着没事优化优化自己的"锄头"idea，然后想着看看idea用的啥垃圾回收器，后来手动改成了-XX:UseG1GC，满心欢喜觉得没什么问题，直接删除缓存重启，结果不出意料的出问题了&#xff0c…...

编程日记 2025/7/4 21:26:50

STM32F407使用ESP8266实现阿里云OTA（中）

文章目录前言一、程序分析二、程序讲解1. main函数2. Get_Version()函数3. esp_Init()函数4. Check_Updata()函数结语前言从上一章STM32F407使用ESP8266实现阿里云OTA（上）中我们已经对连接阿里云和从阿里云获取升级包的流程非常的熟悉了。所以本章我们进行STM32的程序开发…...

编程日记 2025/7/4 20:34:35

如何利用快照与备份快速恢复服务器的数据

在服务器上利用**快照（Snapshot）**和**备份（Backup）**快速恢复数据，可显著减少停机时间并确保业务连续性。以下是具体操作步骤和最佳实践： --- ### **1. 快照（Snapshot）恢复** **适…...

编程日记 2025/7/4 21:51:25

【Leetcode 每日一题】2799. 统计完全子数组的数目

问题背景给你一个由正整数组成的数组 n u m s nums nums。如果数组中的某个子数组满足下述条件，则称之为完全子数组 ： 子数组中不同元素的数目等于整个数组不同元素的数目。返回数组中完全子数组的数目。子数组是数组中的一个连续非空序…...

编程日记 2025/7/4 20:30:45

主流操作系统对比分析（macOS、Linux、Windows、Unix）

主流操作系统对比分析（macOS、Linux、Windows、Unix） 一、系统基本介绍系统核心特点典型代表macOS苹果公司开发，基于 Unix（BSD），闭源，专为苹果硬件优化，强调用户体验和设计美学。m…...

编程日记 2025/7/4 20:25:02

Qt使用 SQLite 数据库的基本方法

在 Qt 中，使用 SQLite 数据库的基本方法与 MySQL 类似，但 SQLite 是一个轻量级的嵌入式数据库，通常不需要外部数据库服务器。你可以直接在本地磁盘上操作 SQLite 数据库文件。 1. 安装 SQLite 驱动通常，Qt 默认包含了对 SQLite…...

编程日记 2025/7/4 20:18:06

【刷题系列】LeetCode消失的数字、轮转数组

文章目录 1、消失的数字1.1 题目描述1.2 题目分析 2、轮转数字2.1 题目描述2.2 题目分析 1、消失的数字原题链接：消失的数字 1.1 题目描述数组nums包含从0到n的所有整数，但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(n)时间内完成吗…...

编程日记 2025/7/4 22:00:07

Unreal Niagara制作SubUV贴图翻页动画

SubUV翻页动画是游戏中的常见功能，通过对每一小块UV进行移动可以模拟动画效果，接下来对下图进行SubUV动画的制作。 (金币测试图下载地址：https://download.csdn.net/download/grayrail/90684422） 最终效果如下： 1.…...

编程日记 2025/7/4 20:15:08

【C++】模版初阶：函数模板、类模板

文章目录一、为什么要使用模板二、什么是函数模板1、函数模板（1）概念（2）格式（3）原理（4）函数模板的实例化（5）模板参数的匹配原则 2、类模板（1&…...

编程日记 2025/7/4 20:46:16

Kotlin基础知识全面解析(下)

文章目录第六章：集合与函数式编程6.1 集合概述6.2 集合操作6.3 序列第七章：协程与异步编程7.1 协程基础7.2 挂起函数7.3 异步与等待7.4 协程上下文与调度器第八章：Kotlin标准库8.1 作用域函数let函数run函数with函数apply函数also函数 8.2…...

编程日记 2025/7/4 20:13:07

NVIDIA高级辅助驾驶安全报告解析

近期参加了NVIDIA高级辅助驾驶开发者实验室，读了NVIDIA的高级辅助驾驶安全报告白皮书，里面涉及了不少有意思的内容，大致分享下英伟达在高级辅助驾驶领域的安全性上的工作。最令人印象深刻的是NVIDIA提出的"四大支柱"架构&#x…...

编程日记 2025/7/4 20:11:46

HarmonyOS：一多能力介绍：一次开发，多端部署

概述如果一个应用需要在多个设备上提供同样的内容，则需要适配不同的屏幕尺寸和硬件，开发成本较高。HarmonyOS 系统面向多终端提供了“一次开发，多端部署”（后文中简称为“一多”）的能力，可以基于一种设计…...

编程日记 2025/7/4 20:27:52

位运算题目：解码异或后的排列

文章目录题目标题和出处难度题目描述要求示例数据范围解法思路和算法代码复杂度分析题目标题和出处标题：解码异或后的排列出处：1734. 解码异或后的排列难度 6 级题目描述要求有一个整数数组 perm \texttt{perm} perm，是前…...

编程日记 2025/7/4 20:18:07

elasticsearch查询中的特殊字符影响分析

大家先看一个执行的dsl 查询sql,大致的意思是排除某些分类下的商品 GET /productinfos/_search {"from": 0,"query": {"bool": {"must": [{"exists": {"field": "minprice"}},{"bool": {&qu…...

编程日记 2025/7/4 20:21:49

Django创建的应用目录详细解释以及如何操作数据库自动创建表

创建好Django项目后如果要创建 python manage.py startapp 模块名模块使用我创建一个system模块后是注意:urls是我自己建的文件 1.migrations目录存放数据库的迁移文件,当models.py中模型定义发生变化时，通过迁移操作能同步数据库结构变化 __init__ 使该目录…...

编程日记 2025/6/29 12:23:33

Visual Studio Code 使用tab键往左和往右缩进内容

使用VSCode写东西，经常遇到多行内容同时缩进的情况，今天写文档的时候就碰到，记录下来： 往右缩进选中多行内容，点tab键，会整体往右缩进： 往左缩进选中多行内容，按shifttab&am…...

编程日记 2025/6/29 10:59:20

数据结构算法复杂度介绍

数据结构：互相之间存在一种或者多种特定元素的集合，在逻辑上分为线性结构，散列结构，、树形结构、图形结构等。算法：求解具体问题的步骤描述，代码上表现出来是解决特定问题的一组有限的指令序列。简单来说…...

编程日记 2025/6/29 10:50:55

SiamMask中的分类分支、回归分支与Mask分支，有何本质差异？

SiamMask中的分类分支、回归分支与Mask分支，有何本质差异？ 一、引言二、分支定位与任务目标三、网络结构与感受野设计3.1 分类分支（Classification Head）3.2 回归分支（Regression Head）3.3 Mask分支&#x…...

编程日记 2025/6/29 11:22:25

使用 Typora + PicGo + Gitee/GitHub 构建 Markdown 图床技术方案

使用 Typora PicGo Gitee/GitHub 构建 Markdown 图床技术方案 AuthorDateVersionNoteTao Wang2025-04-24V1.0Release the document. 文章目录使用 Typora PicGo Gitee/GitHub 构建 Markdown 图床技术方案前言核心概念解析图床技术原理环境搭建基础工具清单软件安装流程 …...

编程日记 2025/6/29 9:22:55

问道数码兽怀旧剧情回合手游源码搭建教程（反查重优化版）

本文将对"问道数码兽"这一经典卡通风格回合制手游的服务端部署与客户端调整流程进行详细拆解，适用于具备基础 Windows 运维和手游源码调试经验的开发者参考使用。教程以实战为导向，基于原始说明内容重构优化，具备较高的内容查重避重…...

编程日记 2025/6/29 10:29:21

Electron Forge【实战】百度智能云千帆大模型 —— AI聊天

1. 获取 Access Key 与 Secret Key 登录百度智能云 https://login.bce.baidu.com/ 2. 安装node.js sdk npm install baiducloud/qianfan3. src/main.ts import { setupIPC } from "./ipc";在 const mainWindow 之后 setupIPC(mainWindow);4. src/ipc.ts import { ipc…...

编程日记 2025/6/29 10:44:55

机器人操作中的生成式 AI：综述（下）

25年3月来自香港大学、香港理工、香港科大、浙大和清华大学的论文“Generative Artificial Intelligence in Robotic Manipulation: A Survey”。本综述全面回顾机器人操作领域生成学习模型的最新进展，并探讨该领域的关键挑战。机器人操作面临着关键瓶颈&#xff…...

编程日记 2025/6/29 10:29:36

把一个 PyTorch 的图像张量转换成 NumPy 格式，并按照正确的维度顺序显示出来

示例代码： plt.imshow(np.transpose(tensor_denorm.numpy(), (1, 2, 0)))它的作用是：把一个 PyTorch 的图像张量转换成 NumPy 格式，并按照正确的维度顺序显示出来。 🚀 一步步解释： ✅ tensor_denorm 这是一个形状为…...

编程日记 2025/6/29 9:23:34

windows上的RagFlow+ollama知识库本地部署

一、 docker的安装与部署 1. 下载Docker Desktop 访问Docker官网并下载适用于Windows的Docker Desktop安装程序。 RagFlow对docker的要求： Docker ≥ 24.0.0 & Docker Compose ≥ v2.26. docker 下载地址： https://www.docker.com/ Get Docker | D…...

编程日记 2025/6/29 10:18:18

【docker】 pull FROM build

镜像拉取失败 token问题 DeadlineExceeded: failed to fetch anonymous token Get "https://auth.docker.io/token?...": dial tcp 157.240.20.8:443: i/o timeout1. 检查网络连通性如果 curl 命令卡住或超时，说明网络到 Docker Hub 存在问题。 ping regt-1.doc…...

编程日记 2025/6/29 11:06:08

【数据分析实战】使用 Matplotlib 绘制玫瑰图

🌹 1、简述玫瑰图，又称极坐标柱状图（Polar Bar Chart），是一种特殊的条形图，适用于展示方向型数据，例如：风向频率图（Wind Rose）每月、每日不同类别统计圆形时间序列展示（如12个月销售量分布）在本篇博客中，我们将使用 matplotlib 画出玫瑰图，包括基本玫瑰图、多…...

编程日记 2025/6/29 12:08:52