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

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>
http://www.lryc.cn/news/118905.html

相关文章:

  • “深入探究JVM:揭秘Java虚拟机的工作原理“
  • 小程序的api使用 以及一些weui组件实列获取头像 扫码等
  • 海思ss928部署手写数字识别模型
  • 组学知识速递(五)|ChIP-seq知多少?
  • 2308C++内存序概略
  • 【C++】string的使用
  • Android 周期任务
  • 修改第三方组件默认样式
  • 【游戏客户端】制作你玩我猜Like玩法
  • 分页查询从接口到实现,统一对日期类型进行格式化处理
  • 栈和队列详解(1)
  • 苏州OV泛域名RSA加密算法https
  • 凯迪正大—微机继电保护校验仪
  • Linux文件属性与权限管理(可读、可写、可执行)
  • Centos7.9安装lrzsz进行文件传输---Linux工作笔记059
  • 酒吧座位全解析 小白必看
  • DAY19
  • Data analysis|Tableau基本介绍及可实现功能
  • 单元测试优化:为什么要对程序进行测试?测试有什么好处?
  • 自动装配在Spring Boot中的重要性及实现方式
  • 校对软件在司法系统中的应用:加强刑事文书审查
  • 微信小程序上传图片和文件
  • 拥抱AIGC浪潮,亚信科技将如何把握时代新增量?
  • 【opencv】指定宽或高按比例缩放图片 拼接图片
  • 使用C#加载TOOLBLOCK
  • MPAS-A原理及陆面模式的基本概念
  • 前端技术Html,Css,JavaScript,Vue3
  • 实战项目——多功能电子时钟
  • 【es6】对象解构赋值
  • 腾讯云服务器CVM标准型S6详细介绍_性能测评