html根据图片变换背景色
html根据图片变换背景色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.item {width: 50%;height: 80vh;margin: 0 auto;border: 1px solid red;}</style>
</head><body><img src="./img/1.png" alt="" style="width: 200px;height: 200px;border: 1px solid red;"><script>// Load the imageconst img = new Image();img.src = './img/1.png';// Wait for the image to loadimg.onload = function () {// Create a canvas elementconst canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;// Draw the image onto the canvasconst ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0);// Get the dominant color of the imageconst imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);const colors = {};for (let i = 0; i < imageData.data.length; i += 4) {const r = imageData.data[i];const g = imageData.data[i + 1];const b = imageData.data[i + 2];const color = `${r},${g},${b}`;if (colors[color]) {colors[color]++;} else {colors[color] = 1;}}const dominantColor = Object.keys(colors).reduce((a, b) => colors[a] > colors[b] ? a : b);// Set the background color of the webpage to the dominant colordocument.body.style.backgroundColor = `rgb(${dominantColor})`;};</script></body></html>
相关文章：
html根据图片变换背景色
html根据图片变换背景色 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.item {width: 50%;height: 80vh;margin: 0 auto;border: 1px solid red;}</style> </head><body>…...
“深入探究JVM：揭秘Java虚拟机的工作原理“
标题：深入探究JVM：揭秘Java虚拟机的工作原理 摘要：本文将深入探究Java虚拟机（JVM）的工作原理，包括JVM的架构、内存管理、垃圾回收机制以及即时编译等关键概念。通过详细解释这些概念，读者将能够…...
小程序的api使用 以及一些weui组件实列获取头像 扫码等
今日目标 响应式单位rpx小程序的生命周期 【重点】20%小程序框架 weui 【重点】 50%内置API 【重点】30%综合练习 1. 响应式rpx 1.1 rpx单位 rpx是微信小程序提出的一个尺寸单位，将整个手机屏幕宽度分为750份，1rpx 就是 1/750，避免不同手…...
海思ss928部署手写数字识别模型
大致流程--------------------------------------------------------------------------------------------------------------------- 模型转换---------------------------------------------------------------------------------------------------- 1：准备MNI…...
组学知识速递（五）|ChIP-seq知多少？
近段时间来，我们合作的ChIP-Seq技术发表的高分成功案例一篇接一篇，您是否心动了呢？本篇文章，总结了ChIP-Seq实验部分重点知识点，开启ChIP-Seq的你绝不要错过！ Q1 什么是ChIP-Seq？ ChIP-Seq即染…...
2308C++内存序概略
参考 释放:在释放前的任意读写操作不能放在此操作之后. 获取:在获取后的任意读写操作不能放在此操作之前. 放松:只保证本操作的原子性,一般用于统计. 消费:在加载后的依赖本原子变量的,都不能重排在本操作之前. 获取释放:获取释放 序列一致,完全一致....
【C++】string的使用
1、string的使用 #define _CRT_SECURE_NO_WARNINGS 1 #include <iostream> #include<string> using namespace std;void Test1() {string s1;string s2("hello");cin >> s1;cout << s1 << endl;//strcat【字符串拼接】string ret1 s…...
Android 周期任务
AlarmManager使用 1.创建意图 // 创建意图，启动MonthlyTaskServiceIntent intent new Intent(getContext(), TimeTaskService.class); // 传递数据intent.putExtra(TimeTaskService.KEY_TITLE,userRemind.getTitle());intent.putExtra(TimeTaskService.KEY_DEC,u…...
修改第三方组件默认样式
深度选择器 修改el-input的样式： <el-input class"input-area"></el-input>查看DOM结构： 原本使用 /deep/ 但是可能不兼容 使用 :deep .input-area {:deep(.el-input__inner){background-color: blue;} }将 input 框背景色改为…...
【游戏客户端】制作你玩我猜Like玩法
【游戏客户端】制作你玩我猜Like玩法 大家好，我是Lampard猿奋~~ “你画我猜”相信大家都不陌生，当初这款小游戏可谓茶余饭后必玩之选，风头一时无二。今天要和大家分享如何实现一个你玩我猜Like的玩法。 我们可以简单的把需求拆成两个个部分&…...
分页查询从接口到实现，统一对日期类型进行格式化处理
编写Service实现类编写Mapper的sql，但复杂的sql语句需要写到mapper对应的xml文件中日期类型格式化处理 /*** 扩展springmvc框架的消息转换器* param converters*/Overrideprotected void extendMessageConverters(List<HttpMessageConverter<?>> conve…...
栈和队列详解(1)
目录 一、什么是栈？ 二、创建一个我们自己的栈 1.前置准备 1.1需要的三个文件 1.2结构体的创建和头文件的引用 2.接口的实现 2.1初始化栈结构体 2.2尾插(压栈) 2.3栈存放的元素个数和判断栈是否为空 2.4获取栈顶元素 2.5出栈 2.6摧毁栈 2.7测试接口 三、…...
苏州OV泛域名RSA加密算法https
RSA加密算法是一种非对称加密算法，它被广泛应用于信息安全领域。与对称加密算法不同，RSA加密算法使用了两个密钥，一个公钥和一个私钥。公钥可以公开，任何人都可以使用它加密信息，但只有私钥的持有者才能解密信息。RSA加…...
凯迪正大—微机继电保护校验仪
一、继电保护测试仪产品概述 KDJB-802继电保护测试仪是在参照电力部颁发的《微机型继电保护试验装置技术条件（讨论稿）》的基础上，听取用户意见，总结目前国内同类产品优缺点，充分使用现代的微电子技术和器件实现的一种新…...
Linux文件属性与权限管理（可读、可写、可执行）
Linux把所有文件和设备都当作文件来管理，这些文件都在根目录下，同时Linux中的文件名区分大小写。 一、文件属性 使用ls -l命令查看文件详情： 1、每行代表一个文件，每行的第一个字符代表文件类型，linux文件类型包括&am…...
Centos7.9安装lrzsz进行文件传输---Linux工作笔记059
这里咱们lrzsz命令,需要用来进行文件传输,因为如果不安装这个命令的话,那么 传输安装包什么的就不方便因为只有少数传输工具,才支持,直接拖拽的.没有的时候就可以用这个工具,用命令来传输 直接就是: sz 文件名 就可以把文件下载下来 rz 选择一个文件, 就可以把文件上传到当…...
酒吧座位全解析 小白必看
相信还有很多第一次去酒吧的朋友们还不了解吧台、散台、卡座的区分，下面我简单解说一下，如有错漏，欢迎指正！一、吧台吧台是酒吧的核心部位，走进酒吧门，首先映入眼帘的就是吧台，一排人围着吧台几…...
DAY19
题目一 空间尝试模型 一个样本做行一个样本做列 范围尝试模型 以....做分隔 dp[i][j] 为以i为左界限 以j为右界限 求这个范围内的计算值(不对 是方法数) 这& | ^ 都是双目运算符 观察一下规律 整体字符数量一定为奇数(包括运算符和数字) 对应到数组中 数组的位一定是偶数…...
Data analysis|Tableau基本介绍及可实现功能
一、基础知识介绍 （一）什么是tableau tableau 成立于 2003 年，是斯坦福大学一个计算机科学项目的成果，该项目旨在改善分析流程并让人们能够通过可视化更轻松地使用数据。Tableau可以帮助用户更好地理解和发现数据中的价值&#x…...
单元测试优化：为什么要对程序进行测试？测试有什么好处？
单元测试（Unit Testing）又称为模块测试, 是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。 程序单元是应用的最小可测试部件。简单来说，就是测试数据的稳定性是否达到程序的预期。 我们日常开发时可能…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
AI，如何重构理解、匹配与决策？
AI 时代，我们如何理解消费？ 作者｜王彬 封面｜Unplash 人们通过信息理解世界。 曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。 但 AI 时代的来…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...