Web前端之原生实现图片调色盘、动态设置图片跨域问题、动态设置Css变量、实现图片渐变遮罩、动态设置鼠标事件、获取图片主色调、数组随机重组、鼠标移入移出、宽高比布局、颜色填充、边框阴影、流式布局

智码帮MJ682517

已于 2024-08-24 17:20:26 修改

阅读量875

点赞数 14

分类专栏： Web前端 JavaScript Style 文章标签：前端 web javascript web前端 html css

于 2024-01-27 00:15:03 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/119593724

版权

Web前端同时被 3 个专栏收录

359 篇文章 5 订阅

订阅专栏

JavaScript

221 篇文章 6 订阅

订阅专栏

Style

92 篇文章 0 订阅

订阅专栏

前言

Color Thief是用于提取图片的主要颜色或者代表性颜色的调色板工具，基于JavaScript和canvas实现。

安装
npm i --save colorthief
cnpm install colorthief
yarn 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]);
}