【日常记录】【插件】使用ColorThief,跟随图片变化改变网页背景

文章目录

    • 1、效果图
    • 2、ColorThief
    • 3、实现
    • 4、参考链接

1、效果图

在这里插入图片描述

想要实现,界面的背景颜色,跟随图片的 颜色来进行展示,

2、ColorThief

在这里插入图片描述

要想实现跟随图片变化实现网页背景渐变效果,则需要获取图片的主要颜色,可以使用ColorThief库来获取图片的颜色

在这里插入图片描述

需要注意:getPalette和 getColor 方法在node 环境会返回一个promise
方法介绍

  • getColor:获取图片的主色调,会返回一个数组,长度为3,这三项分别是 rgb的值
getColor(image [, quality])
Returns: [Number, Number, Number]

image:如果是浏览器环境就是,HTML image element;如果是node环境就是图片的路径,不建议是url,可能会有跨域风险
quality:是质量,是一个可选参数,必须是值为 1 或更大的 Integer,默认为 10。该数字决定了在对下一个像素进行采样之前跳过的像素数。我们很少需要对图像中的每个像素进行采样才能获得良好的结果。数字越大,值的返回速度就越快
  • getPalette:获取这个图片的主要的颜色信息,返回值是二维数组
getPalette(image [, colorCount, quality]
Returns: [[Number, Number, Number], ...]

第二个参数是个数,你需要几个颜色,就是几

node环境

  1. 安装依赖,npm i --save colorthief
  2. 引入,const ColorThief = require('colorthief');
  3. 获取颜色
const img = resolve(process.cwd(), 'rainbow.png');

ColorThief.getColor(img)
    .then(color => { console.log(color) })
    .catch(err => { console.log(err) })

ColorThief.getPalette(img, 5)
    .then(palette => { console.log(palette) })
    .catch(err => { console.log(err) })

3、实现

浏览器环境

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      background-image: linear-gradient(to bottom, var(--color1), var(--color2));
      background-repeat: no-repeat;
      height: 100%;
    }

    .box {
      display: grid;
      grid-template-rows: repeat(2, 200px);
      grid-template-columns: repeat(2, 200px);
      grid-gap: 20px;
      margin: 0 auto;
      width: 500px;
      height: 500px;
    }

    img {
      transition: all .4s;
    }

    .box img:hover {
      transform: scale(1.2);
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/img1.jpg" alt="">
    <img src="./images/img2.jpg" alt="">
    <img src="./images/img3.jpg" alt="">
    <img src="./images/img4.jpg" alt="">
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/color-thief/2.4.0/color-thief.umd.js"></script>
  <script>
    const colorThief = new ColorThief()    // 创建ColorThief的实例对象

    let imgsEl = document.querySelectorAll('img');
    imgsEl.forEach(el => {
      el.addEventListener('mouseover', function ({ target }) {
        console.log('鼠标移入', target);
        // 第一个参数是图片元素,或者url,第二个参数是 需要提取颜色的个数
        // 返回值是一个二维数组
        const colors = colorThief.getPalette(target, 2)
        colors.forEach((item, index) => {
          document.documentElement.style.setProperty(`--color${index + 1}`, `rgb(${item[0]}, ${item[1]}, ${item[2]})`)
        })

      })
    })
  </script>
</body>

</html>

4、参考链接

  • ColorThief 官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/469231.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

你真的会做抖音小店吗?你做抖店的方法是正确的吗?教学分享

大家好&#xff0c;我是电商花花。 新的一年&#xff0c;不少做抖店的商家都会产生一个疑问&#xff0c;2024年抖音小店无货源还能继续做吗&#xff1f; 做无货源模式还会被处罚吗&#xff1f; 先说答案&#xff0c;2024年抖音小店无货源能做&#xff0c;不仅能做且仍然是抖音…

Java学习笔记(14)

常用API Java已经写好的各种功能的java类 Math Final修饰&#xff0c;不能被继承 因为是静态static的&#xff0c;所以使用方法不用创建对象&#xff0c;使用里面的方法直接 math.方法名 就行 常用方法 Abs,ceil,floor,round,max,minm,pow,sqrt,cbrt,random Abs要注意参数的…

电商评论数据聚类实验报告

目录 实验目的整体思路数据介绍代码与实验步骤 4.1 爬虫代码 4.2 数据清洗 4.3 分词 4.4 去停用词 4.5 计算TF-IDF词频与聚类算法应用 4.6 生成词云图实验结果 5.1 词云图 5.2 聚类结果分析不足与反思参考资料 1. 实验目的 掌握无监督学习问题的一般解决思路和具体解决办法&…

讯鹏智能边缘计算网关主机,支持MQTT协议主动上传上位机软件平台

随着科技的不断发展&#xff0c;智能化设备在我们的生活中扮演着越来越重要的角色。而智能边缘计算网关作为连接智能设备与互联网的重要纽带&#xff0c;其远程运维功能为管理者带来了极大的便利。特别是像OkEdge边缘计算网关这样的产品&#xff0c;不仅可以替代传统的Windows系…

Unity中使用AVPro Video播放视频的完全指南

Unity AVPro是一款强大的视频播放解决方案&#xff0c;它支持多种视频格式和编解码器&#xff0c;能够在Unity中实现高质量的视频播放。本教程将指导你如何在Unity项目中使用AVPro播放视频。 目录如下 1、安装AVPro Video2、在UI上显示视频3、在3D物体上显示视频&#xff0c;…

JWT(跨域身份验证解决方案)

Json web token (JWT), 跨域身份验证解决方案,特别适用于分布式站点的单点登录(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑所必须的声明信息,该token也可直接被用于…

jQuery 常用API

一、jQuery 选择器 1.1 jQuery 基础选择器 原生 JS 获取元素方式很多&#xff0c;很杂&#xff0c;而且兼容性情况不一致&#xff0c;因此 jQuery 给我们做了封装&#xff0c;使获取元素统一标准。 1.2 jQuery 层级选择器 jQuery 设置样式 1.3 隐式迭代&#xff08;重要&…

算法打卡day21|回溯法篇01|理论知识,Leetcode 77.组合

回溯法理论知识 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。回溯是递归的副产品&#xff0c;只要有递归就会有回溯。所以回溯函数也就是递归函数&#xff0c;指的都是一个函数。 回溯法的效率 回溯法并不是什么高效的算法。因为回溯的本质是穷举&#xff0c;…

打靶记录(个人学习笔记)

一、信息收集 1、主机发现 通过nmap对此网段进行扫描&#xff0c;可以确定靶机ip为192.168.189.144 2、端口扫描 确定了靶机ip之后&#xff0c;我们来扫描端口 发现80端口开放&#xff0c;先访问80端口 用插件识别出一些信息 Wappalyzer插件获得信息&#xff1a;Web服务&am…

jquery 列表框可以手动修改(调用接口修改)

类似于这种 直接上代码 列表框 <td>//目的主要是获取属性名的(要更改的属性名) 在下面juqery的这一行(var field $(thisobj).prev(input).attr(name);)有体现<input type"hidden" name"voyage" value"${M_PSI_PERIOD_INFO.port}">…

卓越巨人wzy

解法&#xff1a; 向下取整同理&#xff0c;f(n)20230416-n 当n20230416时&#xff0c;f&#xff08;n&#xff09;0&#xff0c;之后由于向上取整&#xff0c;结果恒为0. #include<iostream> #include<algorithm> #include<vector> using namespace std; …

关系型数据库mysql(1)基础认知和安装

目录 一.数据库的基本概念 1.1数据 1.2表 1.3数据库 1.4 DBMS 数据库管理系统 1.4.1基本功能 1.4.2优点 1.4.3DBMS的工作模式 二.数据库的发展历史 2.1发展的三个阶段 第一代数据库 第二代数据库 第三代数据库 2.2mysql发展历史 三.主流数据库 四.关系型数据库和…

Windows三大认证! NTLM_Relay攻击

Windows有三大认证 NTLM本地认证NTLM网络认证Kerberos域认证 1.Kerberos域认证 对于Kerberos域认证&#xff0c;我之前讲过很多的文章 所以这里就不再赘述了 2.NTLM本地认证 其实就是windows本地登录认证&#xff0c;我之前也讲过&#xff0c;于是也不再赘述了 hhh&#x…

【Lexus】Executive Sedan

文章目录 【基础信息】车漆颜色历年指导价2.5L车型保养 【缺点】混动车型缺点负面 【对比】ES200 vs ES200 龙年限定ES200 vs ES260ES200 vs ES300hES200 vs NX260ES200 vs BMW 325i M 运动曜夜 【Buy】【尺寸】 【基础信息】 丰田&#xff0c;雷克萨斯&#xff0c;1997推出第…

android studio 安装lombok插件

android studio 安装lombok插件 由于 AS 不是基于 IDEA release 版本进行开发的&#xff0c;因此lombok对idea的插件可能再as中无法查看到。因此再as中通过plugins管理无法安装lombok插件。这就导致再gradle引入lombok后&#xff0c;虽然编译可能会通过&#xff0c;但是代码在查…

分布式接口幂等性解析

一、概述 幂等性定义&#xff1a;用户对于同一操作发起的一次请求或者多次请求的结果是一致的&#xff0c;不会因为多次点击而产生了副作用。【同一操作指的是同一个浏览器&#xff0c;发送相同的请求】。 常见场景&#xff1a; 提交订单接口。返回提交结果时网络出现故障&am…

电子元器件行业发展势头强劲,钧崴电子IPO上市抢占市场份额

电子元器件处于电子信息产业链上游&#xff0c;是通信、计算机及网络、数字音视频等系统和终端产品发展的基础&#xff0c;对电子信息产业的发展起着至关重要的作用。近年来中国电子工业持续高速增长&#xff0c;带动电子元器件产业强劲发展。目前&#xff0c;我国许多门类的电…

linux系统------------Mysql数据库

目录 一、数据库基本概念 1.1数据(Data) 1.2表 1.3数据库 1.4数据库管理系统(DBMS) 数据库管理系统DBMS原理 1.5数据库系统&#xff08;DBS) 二、数据库发展史 1、第一代数据库 2、第二代数据库 3、第三代数据库 三、关系型数据库 3.1关系型数据库应用 3.2主流的…

实现:mysql-5.7.42 到 mysql-8.2.0 的升级(rpm方式)

实现&#xff1a;mysql-5.7.42 到 mysql-8.2.0 的升级&#xff08;rpm方式&#xff09; 1、升级准备1、使用mysql-shell 检查工具检查兼容性 2、操作环境3、备份数据库、my.cnf文件&#xff0c;停止mysql服务&#xff08;重要&#xff09;4、上传、解压安装包5、查看已安装的my…

问GPT:将Excel中一行转换为一列的方法

问GPT&#xff1a;将excel中一行转换为一列的方法 函数&#xff1a; TRANSPOSE(A2:E2)