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

图片调色盘

图片预览

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

配置安装

Color-Thief 安装包使用文档

yarn add colorthief -S // npm install colorthief --save

代码

<template><div class="img-thief"><div class="container"><div class="thief-item" v-for="(item, index) in imgList" :key="item"><img draggable="false" :src="item" alt="" @contextmenu.prevent @mouseenter="handleMouseEnter($event.target, index)" @mouseleave="handleMouseLeave($event.target, index)" :style="{ opacity: index === hoverIndex ? 1 : hoverIndex === -1 ? 1 : 0.2 }" /></div></div></div>
</template>
<script>
import ColorThief from 'ColorThief';
const colorThief = new ColorThief();
export default {data() {return {imgList: [require('@/assets/thief/1.jpg'), require('@/assets/thief/2.jpg'), require('@/assets/thief/3.jpg'), require('@/assets/thief/4.jpg')],hoverIndex: -1,};},methods: {handleMouseEnter(item, index) {let html = document.documentElement;this.hoverIndex = index;const thiefColors = colorThief.getPalette(item, 3);const mapThiefColors = thiefColors.map((color) => `rgb(${color[0]},${color[1]},${color[2]})`);html.style.setProperty('--thief-bg-color1', mapThiefColors[0]);html.style.setProperty('--thief-bg-color2', mapThiefColors[1]);html.style.setProperty('--thief-bg-color3', mapThiefColors[2]);},handleMouseLeave() {let html = document.documentElement;this.hoverIndex = -1;html.style.setProperty('--thief-bg-color1', '#fff');html.style.setProperty('--thief-bg-color2', '#fff');html.style.setProperty('--thief-bg-color3', '#fff');},},
};
</script><style lang="scss" scoped>
.img-thief {width: 100%;height: 100%;display: grid;place-items: center;background: linear-gradient(to top, var(--thief-bg-color1), var(--thief-bg-color2), var(--thief-bg-color3));
}
.container {width: 800px;height: 800px;
}
.thief-item {width: 370px;height: 370px;margin-left: 20px;margin-top: 20px;float: left;box-sizing: border-box;border: 4px solid transparent;&:hover {border: 4px solid #fff;cursor: pointer;transform: translateZ(10px) scale(1.02);transition: all 0.8s;}img {width: 100%;height: 100%;user-select: none;display: block;}
}
</style>

variable.scss 定义全局变量

html {--thief-bg-color1: #fff;--thief-bg-color2: #fff;--thief-bg-color3: #fff;
}

相关文章:

图片调色盘

图片预览 配置安装 Color-Thief 安装包使用文档 yarn add colorthief -S // npm install colorthief --save代码 <template><div class"img-thief"><div class"container"><div class"thief-item" v-for"(item, in…...

一文读懂Base64

这几天在和第三方交互的时候&#xff0c;对方返回的数据是base64格式的数据&#xff0c;所以这两天又彻底捋了下Base64的来龙去脉。之前看过一篇文章说的非常好&#xff08;再找到给加上链接&#xff09;&#xff0c;我在这不详细说明了&#xff0c;只说转换过程。 还是使用中…...

CCF CSP认证 历年题目自练 Day20

题目一 试题编号&#xff1a; 201903-1 试题名称&#xff1a; 小中大 时间限制&#xff1a; 1.0s 内存限制&#xff1a; 512.0MB 问题描述&#xff1a; 题目分析&#xff08;个人理解&#xff09; 常规题目&#xff0c;先看输入&#xff0c;第一行输入n表示有多少数字&am…...

【Overload游戏引擎分析】从视图投影矩阵提取视锥体及overload对视锥体的封装

overoad代码中包含一段有意思的代码&#xff0c;可以从视图投影矩阵逆推出摄像机的视锥体&#xff0c;本文来分析一下原理 一、平面的方程 视锥体是用平面来表示的&#xff0c;所以先看看平面的数学表达。 平面方程可以由其法线N&#xff08;A, B, C&#xff09;和一个点Q(x0,…...

vue全局事件总线是什么?有什么用?解决了什么问题,与pinia有什么区别?

全局事件总线快速入门 概念基本概念&#xff08;是什么&#xff1f;&#xff09;核心概念 核心特性和优势(有什么用&#xff1f;)解决了什么问题&#xff1f;主要优势是什么&#xff1f; 案例演示&#xff1f;传递数据-案例演示传递事件-案例演示 与pinia有什么区别&#xff1f…...

【debian 12】:debian系统切换中文界面

目录 目录 项目场景 基础参数 原因分析 解决方案 1.ctrlaltT 打开终端 2.查询当前语言环境&#xff08;我的已经设置成了中文 zh_CN.UTF-8&#xff09; 3.打开语言配置界面 4.最后一步&#xff1a;重启 不要放弃任何一个机会&#xff01; 项目场景&#xff1a; 这两…...

es官方为我们提供的堆内存保护机制-熔断器( breaker )

总熔断器&#xff08;相当于似乎总闸&#xff09; 参数&#xff1a; indices.breaker.total.use_real_memory 默认值&#xff1a;true 在 elasticsearch.yml中配置。 参数&#xff1a; indices.breaker.total.limit 如果 indices.breaker.total.use_real_memory : true, in…...

靶场通关记录

OSCP系列靶场-Esay-CyberSploit1 总结 getwebshell → 源码注释发现用户名 → robots.txt发现base64密码 → SSH登录 提 权 思 路 → 内网信息收集 → 发现发行版本有点老 → 内核overlayfs提权 准备工作 启动VPN 获取攻击机IP > 192.168.45.220 启动靶机 获取目标机器I…...

全网最新最全的软件测试面试题

一、前言 与开发工程师相比&#xff0c;软件测试工程师前期可能不会太深&#xff0c;但涉及面还是很广的。 在一年左右的实习生或岗位的早期面试中&#xff0c;主要是问一些基本的问题。 涉及到的知识主要包括MySQL数据库的使用、Linux操作系统的使用、软件测试框架问题、测试…...

如何列出 Ubuntu 和 Debian 上已安装的软件包

当你安装了 Ubuntu 并想好好用一用。但在将来某个时候&#xff0c;你肯定会遇到忘记曾经安装了那些软件包。 这个是完全正常。没有人要求你把系统里所有已安装的软件包都记住。但是问题是&#xff0c;如何才能知道已经安装了哪些软件包&#xff1f;如何查看安装过的软件包呢&a…...

图论---最小生成树问题

在连通网的所有生成树中&#xff0c;所有边的代价和最小的生成树&#xff0c;称为最小生成树。解决最小生成树问题一般有两种算法&#xff1a;Kruskal算法和Prim算法。 Kruskal算法 原理&#xff1a;基本思想是从小到大加入边&#xff0c;是个贪心算法。我们将图中的每个边按…...

elementplus 时间范围选择器限制选择时间范围

<el-date-pickerv-model"form.time" type"daterange"range-separator"-"start-placeholder"开始时间"end-placeholder"结束":disabled-date"disabledDate"calendar-Change"calendarChange" />co…...

【网络】抓包工具Wireshark下载安装和基本使用教程

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341; 希望本文能够给您带来一定的帮助&#x1…...

Metasequoia 4 水杉3D建模工具 附序列号

Metasequoia 4是一款非常强大的3D水杉建模工具&#xff0c;它基于多边形建模技术&#xff0c;可以用于创建各种对象并支持多种第三方3DCG软件的文件格式&#xff0c;是一款非常适合从爱好到业务&#xff0c;支持3D电脑绘图&#xff0c;3D印刷&#xff0c;游戏开发等的3D建模软件…...

股票杠杆交易平台排名:淘配网推荐的十大平台

在投资世界中&#xff0c;股票杠杆交易一直以其提供更高回报机会的吸引力而备受欢迎。随着市场的不断发展&#xff0c;出现了越来越多的股票杠杆交易平台。本文将为您介绍淘配网推荐的十大股票杠杆交易平台&#xff0c;并分析它们的特点。 富灯网 - 富灯网以其全面的杠杆产品和…...

CoreData + CloudKit 在初始化 Schema 时报错 A Core Data error occurred 的解决

问题现象 如果希望为 CoreData 支持的 App 增加云数据备份和同步功能,那么 CloudKit 是绝佳的选择。CloudKit 会帮我们默默处理好一切,我们基本不用为升级而操心。 不过,有时在用本地 CoreData NSManagedObjectModel 初始化 iCloud 中的 Schema 时会发生如下错误: Error …...

修炼k8s+flink+hdfs+dlink(三:安装dlink)

一&#xff1a;mysql初始化。 mysql -uroot -p123456 create database dinky; grant all privileges on dinky.* to dinky% identified by dinky with grant option; flush privileges;二&#xff1a;上传dinky。 上传至目录/opt/app/dlink tar -zxvf dlink-release-0.7.4.t…...

Linux 系统性能瓶颈分析(超详细)

Author&#xff1a;rab 目录 前言一、性能指标1.1 进程1.1.1 进程定义1.1.2 进程状态1.1.3 进程优先级1.1.4 进程与程序间的关系1.1.5 进程与进程间的关系1.1.6 进程与线程的关系 1.2 内存1.2.1 物理内存与虚拟内存1.2.2 页高速缓存与页写回机制1.2.3 Swap Space 1.3 文件系统1…...

kafka与zookeeper的集群

基础配置 systemctl stop firewalld && systemctl disable firewalld setenforce 0 sed -i s/SELINUXenforcing/SELINUXdisabled/ /etc/selinux/configvi /etc/hosts ip1 node1 ip2 node2 ip3 node3zookeeper介绍 zookeeper是一个分布式的协调服务&#xff0c;主要用…...

sqlalchemy 连接池

报错 sqlalchemy.exc.TimeoutError: QueuePool limit of size 100 overflow 10 reached, connection timed out, timeout 30 (Background on this error at: http://sqlalche.me/e/3o7r) 查看数据库未活动超时时间 show variables like "interactive_timeout";一般…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

手动给中文分词和 直接用神经网络RNN做有什么区别

手动分词和基于神经网络&#xff08;如 RNN&#xff09;的自动分词在原理、实现方式和效果上有显著差异&#xff0c;以下是核心对比&#xff1a; 1. 实现原理对比 对比维度手动分词&#xff08;规则 / 词典驱动&#xff09;神经网络 RNN 分词&#xff08;数据驱动&#xff09…...

el-amap-bezier-curve运用及线弧度设置

文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 ‌el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件,用于在 高德地图 上绘制贝塞尔曲线。‌ 基本用法属性path定义曲线的路径,可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...