MENU
- 前言
- 效果图
- html
- JavaScript
前言
Color Thief是用于提取图片的主要颜色或者代表性颜色的调色板工具，基于JavaScript和canvas实现。
安装
npm i --save colorthiefcnpm install colorthiefyarn add colorthief
直接引用
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
npm地址
效果图
视频演示
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片链接及图片调色盘</title>
<link rel="stylesheet" href="../style/index.css">
<style>
html {
background: linear-gradient(to bottom right, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c7), var(--c8));
/* 不重复 */
background-repeat: no-repeat;
height: 100%;
}
</style>
</head>
<body>
<div class="p_36">
<div id="idEl" class="d_g gtc_5fr gg_36"></div>
</div>
<div class="p_f r_36 b_36 c_p fw_700 zi_9 p_8 radius_5 bs_04 bc_696969 color_FFFFFF"
onclick=" handleClickLayout(this)">比例布局</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<script src="./index.js"></script>
</body>
JavaScript
let picturesLinkingList = [
'https://cn.bing.com/th?id=OHR.SleepingFox_ZH-CN2622967726_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.GoldenGateLight_ZH-CN3874822904_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.ThailandNewYears_ZH-CN2058192262_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.BlueAmsterdam_ZH-CN0483591394_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.MehrangarhJodhpur_ZH-CN2855490711_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.HokkaidoSwans_ZH-CN8733312972_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.BukhansanSeoul_ZH-CN8002920750_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.LynxSnow_ZH-CN8908082275_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.SleepyWolf_ZH-CN9870873990_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.SquirrelNetherlands_ZH-CN0757138587_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.SantaCruzSunrise_ZH-CN3074203377_1920x1080.jpg',
'https://cn.bing.com/th?id=OHR.HawkOwl_ZH-CN3401920167_1920x1080.jpg'
];
/**
* 随机重组
* @param {Array} arr
* @returns
*/
function reorganize(arr) {
arr = JSON.parse(JSON.stringify(arr));
let result = [];
while (arr.length > 0) {
let random = Math.floor(Math.random() * arr.length);
result.push(arr[random]);
arr.splice(random, 1);
}
return result;
}
/**
* 流式布局
* @param {Array} list
*/
function layoutFlow(list) {
let el = '';
for (let i = 0; i < list.length; i++) {
let ran = Math.floor(Math.random() * Math.floor(100)),
isClass = ran % 3 === 1;
if (isClass) {
if (list[i + 1] && list[i + 1] !== list.length - 1) {
el += `<div class="h_286 d_f fd_c jc_sb">
<img class="w_100_ h_125 c_p" src="${list[i]}" οnmοuseenter="handleEnter(this)" οnmοuseleave="handleLeave(this)" />
<img class="w_100_ h_125 c_p" src="${list[i + 1]}" οnmοuseenter="handleEnter(this)" οnmοuseleave="handleLeave(this)" />
</div>`;
i++;
} else {
el += `<div class="h_286">
<img class="w_100_ h_100_ c_p" src="${list[i]}" οnmοuseenter="handleEnter(this)" οnmοuseleave="handleLeave(this)" />
</div>`;
}
} else {
el += `<div class="h_286">
<img class="w_100_ h_100_ c_p" src="${list[i]}" οnmοuseenter="handleEnter(this)" οnmοuseleave="handleLeave(this)" />
</div>`;
}
}
idEl.innerHTML = el;
// 解决图片跨域问题
setTimeout(() => {
let imgEl = document.querySelectorAll('img');
imgEl.forEach(item => {
item.setAttribute('crossOrigin', '');
});
});
}
/**
* 宽高比布局
* @param {Array} list
*/
function layoutWidthHeight(list) {
let el = '';
for (let i = 0; i < list.length; i++) {
el += `<img class="w_100_ ar_7_3 c_p" src="${list[i]}" οnmοuseenter="handleEnter(this)" οnmοuseleave="handleLeave(this)" />`;
}
idEl.innerHTML = el;
// 解决图片跨域问题
setTimeout(() => {
let imgEl = document.querySelectorAll('img');
imgEl.forEach(item => {
item.setAttribute('crossOrigin', '');
});
});
}
let isLayout = 2;
/**
* 布局切换
*/
function handleClickLayout(el) {
if (isLayout === 1) {
layoutFlow(reorganize(picturesLinkingList));
isLayout = 2;
if (el) el.innerText = '流式布局';
} else {
layoutWidthHeight(picturesLinkingList);
isLayout = 1;
if (el) el.innerText = '比例布局';
}
}
handleClickLayout();
// -------图片调色盘-------
// 鼠标移入移出公共变量
const colorThief = new ColorThief();
const html = document.documentElement;
/**
* 鼠标移出
* @param {*} img 图片标签
*/
async function handleLeave(img) {
img.style.boxShadow = '0 0 8px 6px transparent';
html.style.setProperty('--c1', 'transparent');
html.style.setProperty('--c2', 'transparent');
html.style.setProperty('--c3', 'transparent');
html.style.setProperty('--c4', 'transparent');
html.style.setProperty('--c5', 'transparent');
html.style.setProperty('--c6', 'transparent');
html.style.setProperty('--c7', 'transparent');
html.style.setProperty('--c8', 'transparent');
}
/**
* 鼠标移入
* @param {*} img 图片标签
*/
async function handleEnter(img) {
img.style.boxShadow = '0 0 8px 6px #ffffff';
let colors = await colorThief.getPalette(img, 8);
colors = colors.map(item => `rgb(${item[0]}, ${item[1]}, ${item[2]})`);
html.style.setProperty('--c1', colors[0]);
html.style.setProperty('--c2', colors[1]);
html.style.setProperty('--c3', colors[2]);
html.style.setProperty('--c4', colors[3]);
html.style.setProperty('--c5', colors[4]);
html.style.setProperty('--c6', colors[5]);
html.style.setProperty('--c7', colors[6]);
html.style.setProperty('--c8', colors[7]);
}
