color-thief获取图片主色调颜色配色效果代码-html代码-BFW代码库

color-thief获取图片主色调颜色配色效果代码

代码语言：html

所属分类：其他

代码描述：color-thief获取图片主色调颜色配色效果代码，请在bfwstudio中预览查看效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Color Thief</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat:700">
    <style>
        :root {
        /* Colors */
        --color: #000;
        --bg-color: #f9f9f9;
        --primary-color: #fc4c02;
        --secondary-color: #f68727;
        --muted-color: #999;
        --code-color: var(--primary-color);
        --code-bg-color: #fff;
    
        /* Typography */
        --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        --code-font: Menlo, Consolas, Monaco, Lucida Console, monospace;
        --bold: 700;
        --x-bold: 900;
        --line-height: 1.5em;
        --line-height-heading: 1.3em;
    
        /* Breakpoints */
        --sm-screen: 640px;
    }
    
    /* Base
     * *----------------------------------------------- */
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        padding: 0;
        background: var(--bg-color);
    }
    
    /* Typography
     * *----------------------------------------------- */
    
    html {
        font-size: 16px;
        font-family: var(--font);
        line-height: var(--line-height);
        -webkit-font-smoothing: antialiased;
    }
    
    h1,
    h2,
    h3 {
        font-weight: var(--x-bold);
        line-height: var(--line-height-heading);
        letter-spacing: -0.005em;
    }
    
    h2 {
        margin: 0 0 0.25em 0;
        font-size: 1.5rem;
    }
    
    h3 {
        margin: 1em 0 0.25em 0;
        font-size: 1.06rem;
    }
    
    code {
        font-family: var(--code-font);
        overflow-wrap: break-word;
    }
    
    
    /* -- Layout ------------------------------------------------------------------ */
    
    .image-section {
        border-bottom: 1px solid #ccc;
        padding: 16px 16px 32px 16px;
        margin-bottom: 32px;
    }
    
    .swatch {
        display: inline-block;
        background: #dddddd;
    }
    
    .color .swatch {
        width: 6rem;
        height: 3rem;
    }
    
    .palette .swatch {
        width: 3rem;
        height: 2rem;
    }
    
    .time {
        color: var(--muted-color);
        font-weight: normal;
    }
    </style>

</head>

<body>

    <div id="example-images"></div>

    <script id='image-tpl' type='text/x-mustache'>
        {{#.}}
        <div class="image-section" data-image="{{.}}">
            <h2>{{.}}</h2>
            <img class="image" src="{{.}}" />
            <div class="output"></div>
        </div>
        {{/.}}
    </script>

    <script id="color-tpl" type="text/x-mustache">
        <div class="color">
            <h3>getColor(img)</h3>
            <div class="swatches">
                <div class="swatch" style="background-color: rgb({{color.0}}, {{col.........完整代码请登录后点击上方下载按钮下载查看