Colorify.js - JavaScript 取色工具


MIT
跨平台
HTML/CSS

软件简介

Colorify.js 是简单,可定制的,极小的 JavaScript 颜色提取工具。

在线演示:http://colorify.rocks/demo.html

主要特性:

  • 从图片提取主色

  • 基于图像颜色生成渐变

  • 在页面隔离颜色和操作

  • 为图像创建一个延迟探测系统

  • 动态加载图片

  • 创建任意多的 colorify({}); 实例

API

Config

colorify({
  id: numeric,
  container: string,
  attr: string, 
  images: array,
  accuracy: numeric,
  color: boolean,
  gradient: boolean,
  gradientDirection: string,
  padding: numeric,
  lazyReveal: {
   transition: numeric, 
   delay: numeric,
   steps: boolean
  },
  give: {
    property: string,
    target: string
  },
  revealOn: {
    trigger: string    event: string
  }
});

Example

colorify({
  id: 1,
  container: 'colorify-container',
  attr: 'colorify', 
  images: [    'image1.png',    'image2.jpg',    'image3.gif'
  ],
  accuracy: 20,
  color: false,
  gradient: true,
  gradientDirection: 'to top left',
  padding: 10,
  lazyReveal: {
   transition: 1, 
   delay: 1,
   steps: true
  },
  give: {
    property: 'color',
    target: '.header h1'
  },
  revealOn: {
    trigger: '#start'
    event: 'click'
  }
});

default

colorify({
  id: 1,
  container: 'colorify',
  attr: 'colorify', 
  images: false,
  accuracy: 100,
  color: boolean,
  gradient: false,
  gradientDirection: false,
  padding: 4,
  lazyReveal: false,
  give: false,
  revealOn: false});