Skip to content

Latest commit

 

History

History
75 lines (65 loc) · 1.82 KB

using.md

File metadata and controls

75 lines (65 loc) · 1.82 KB

Using

Install

npm i fast-average-color

Browser

<html>
<body>
    ...
    <div class="image-container">
        <img src="image.png" />
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
    <script src="https://unpkg.com/fast-average-color/dist/index.min.js"></script>
    <script>
        var
            fac = new FastAverageColor(),
            container = document.querySelector('.image-container');

        fac.getColorAsync(container.querySelector('img'))
            .then(function(color) {
                container.style.backgroundColor = color.rgba;
                container.style.color = color.isDark ? '#fff' : '#000';
            })
            .catch(function(e) {
                console.log(e);
            });
    </script>
</body>
</html>

CommonJS

Details

'use strict';

const FastAverageColor = require('fast-average-color');
const fac = new FastAverageColor();
fac.getColorAsync(container.querySelector('img'))
    .then(function(color) {
        container.style.backgroundColor = color.rgba;
        container.style.color = color.isDark ? '#fff' : '#000';
    })
    .catch(function(e) {
        console.log(e);
    });

ES Modules or TypeScript

Details

import FastAverageColor from 'fast-average-color';

const fac = new FastAverageColor();
fac.getColorAsync(container.querySelector('img'))
    .then(function(color) {
        container.style.backgroundColor = color.rgba;
        container.style.color = color.isDark ? '#fff' : '#000';
    })
    .catch(function(e) {
        console.log(e);
    });

Node.js

Example