本文概述
- 5. imgcolr
- 4. Rgbaster.js
- 3. Colorify.js
- 2. Color Thief
- 1. Vibrant.js
从用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(我可以使用兼容性表)
Colorify是用Java脚本编写的脚本, 可让你从图像中提取颜色并进行操作。从基于主色的简单纯色到基于图像边缘颜色的美丽渐变, colorify.js都会为你的设计增色不少。总之, 使用Colorify.js, 你可以:
- 从图像中提取主色
- 根据图像颜色生成渐变
- 隔离颜色并在页面中的所有位置进行操作
- 为你的图像创建一个惰性显示系统
- 动态加载图像
- 创建任何colorify({}); 你想要的实例
文章图片
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
*/
});
【最佳5(最佳图像颜色提取JavaScript和jQuery插件)】如果你知道另一个有用的JavaScript插件来提取图像的颜色, 请不要害羞并在注释框中与社区共享。
推荐阅读
- 5+ Web项目的最佳免费jQuery和JavaScript动态甘特图
- 15个最佳高级工作门户HTML模板
- 十大基于AngularJS Bootstrap的最佳高级管理模板
- 10+最佳高级ReactJS管理模板
- 十大最佳高级简历和履历式Bootstrap模板
- 10个最佳高级多用途目录模板
- 十大最便宜的通配符SSL证书
- 3个Python初学者编程项目
- 十大(最佳高级新闻或杂志WordPress主题)