最佳5：最佳图像颜色提取JavaScript和jQuery插件

本文概述

• 5. imgcolr
• 4. Rgbaster.js
• 3. Colorify.js
• 2. Color Thief
• 1. Vibrant.js

用Javascript从图像中提取颜色的任务肯定不是日常任务(通常)。但是, 一些开发人员花了一些时间来编写有用的插件, 这些插件使此功能的实现与每个Javascript插件一样非常容易和直接。你可以使用这样的功能来根据用户的个人资料图片或其他疯狂的事物实现颜色自适应的UI。

从用Javascript编写的最佳颜色提取插件中享受我们的前5名。

5. imgcolr

Github

imgcolr是一个jQuery插件, 用于获取给定图像边框的主色。获取颜色后, 你可以以编程方式调整网页上元素的颜色。基于此想法, 你可以使网络更加美丽有趣。请注意, imgcolr无法正确处理带有彩色边框的图像。它的用法很简单：

var imgs = $('img');

imgs.imgcolr(function (img, color) {
    // `img` refers to the current img element
    console.log(img);
    // `color` is the grabbed color, a string like "#ededed"
    console.log(color);
});

Imgcolor在支持HTML5和Flash方面是独特的, 因为与第三方图像一样, 浏览器供应商将在HTML5中获得CORS异常。因此, 基于HTML5的imgcolr仅支持最新的现代浏览器, 例如Google Chrome和Firefox。无论如何, 它确实比Flash版本要快。你只需要确保jQuery和imgcolr.html5.min.js包含在你的网页中即可。

4. Rgbaster.js

Github

RGBaster是一个非常简单的JavaScript库, 用于从图像中提取主色。 colors方法需要图像的DOM元素或图像的URL：

var img = document.getElementById('image');
// or an URL (of your own server)
var img = 'http://example.com/path-to-image.jpg'

RGBaster.colors(img, {
    success: function (payload) {
        console.log('Dominant color:', payload.dominant);
        console.log('Secondary color:', payload.secondary);
        console.log('Palette:', payload.palette);
    }
});

它是高度可定制的, 并且取决于以下浏览器功能：

• 帆布
• CORS
• Array.prototype.map(我可以使用兼容性表)

3. Colorify.js

Github

Colorify是用Java脚本编写的脚本, 可让你从图像中提取颜色并进行操作。从基于主色的简单纯色到基于图像边缘颜色的美丽渐变, colorify.js都会为你的设计增色不少。总之, 使用Colorify.js, 你可以：

• 从图像中提取主色
• 根据图像颜色生成渐变
• 隔离颜色并在页面中的所有位置进行操作
• 为你的图像创建一个惰性显示系统
• 动态加载图像
• 创建任何colorify({});你想要的实例

2. Color Thief

Github

Color Thief是一个非常有用且易于使用的脚本, 用于从图像中获取调色板。它是canvas标签, 可以实现它。如果使用已在DOM中加载的图像, 则可以同步检索调色板：

var colorThief = new ColorThief();

var sourceImage = document.getElementById("image");

// Display main color
// e.g [125, 189, 193]
console.log(
    colorThief.getColor(sourceImage)
);

// Display palette of colors
// e.g [[55, 37, 29], [213, 193, 136], [110, 204, 223]]
console.log(
    colorThief.getPalette(sourceImage)
);

1. Vibrant.js

Github

Vibrant.js是从图像中提取突出颜色的实用程序。 Vibrant.js是Android支持库中很棒的Palette类的javascript端口。

var img = document.createElement('img');
img.setAttribute('src', 'examples/octocat.png')

img.addEventListener('load', function () {
    var vibrant = new Vibrant(img);

    var swatches = vibrant.swatches();

    for (var swatch in swatches){
        if (swatches.hasOwnProperty(swatch) && swatches[swatch]){
            console.log(swatch, swatches[swatch].getHex())
        }
    }

    /*
     * Results into:
     * Vibrant #7a4426
     * Muted #7b9eae
     * DarkVibrant #348945
     * DarkMuted #141414
     * LightVibrant #f3ccb4
     */
});

如果你知道另一个有用的JavaScript插件来提取图像的颜色, 请不要害羞并在注释框中与社区共享。