color-change

A lightweight JavaScript to change the main color of images, background images, videos and canvases in the page

View demo

Features

• Features
• Zero dependencies
• Very easy to use
• Multiple color formats
• Fully accessible
• Works on all modern browsers (no IE support)

Install

npm install --save color-change

Getting Started

Basic usage

<img class="cc" src="a.jpeg" />
<div class="cc" style="background:url(b.jpeg)"></div>
<video class="cc" src="c.mp4" ></video>
<canvas class="cc"></canvas>

import {ColorChange} from 'color-change'
// Select the element you want to change
let cc = new ColorChange('.cc')

// Change the color & hue of the element into 'red'
cc.setColor('#ff0000')

cc.setColor('#ff0000').then(()=>{
    console.log('set color finish .')
})

Specific cases

img color pick:

import {ColorPick} from 'color-change'
// Get the main color of the img
let cp = new ColorPick(document.querySelector('img'))

cp.getColor().then((color)=>{
    let mainColor=color               // [r,g,b]
})     
cp.getColors(5).then((colors)=>{
    let colorArray=colors             //  [[r,g,b],...]
}) 
// May also use async/await 
let colors=await cp.getColors(5)      // return [[r,g,b],...]

ColorPick + ColorChange:

import {ColorChange,ColorPick} from 'color-change'

let cp = new ColorPick(document.querySelector('img'))

// Get the main color of the img
cp.getColor().then((mainColor)=>{

    // Change video color to img main color
    let cc = new ColorChange('video')

    cc.setColor(mainColor)
})

Option

ColorChange

/**
 * ColorChange(el[,isBrightness][,isSaturate])
 *  el: img,background,video,canvas             // Select the element you want to change
 *  isBrightness: bool                          // Turn on color brightness recognition.
 *  isSaturate: bool                            // Turn on color saturation recognition.
 **/ 
let cc =new ColorChange(el,isBrightness,isSaturate)

// function
cc.setColor('#f00') // set color, rgb(255,0,0)| #ff0000 .., return Promise
cc.clear()          // clear color

ColorPick

/**
 * ColorPick(sourceImage)
 *  sourceImage: img,background,video,canvas         // Want to get source Image of the color
 **/ 
let cp =new ColorPick(sourceImage)

// function
cp.getColor().then((color)=>{ ... })                 // Promise, get mian color, return [r,g,b]
cp.getColors(5).then((colors)=>{ ... })              // Promise, Get colors, return [[r,g,b],...]

Note

cross domain URLs are not supported !!!

Please enable cross domain access of resources on the server or use the proxy

License

Copyright (c) 2022 zhu18@vip.qq.com
color-change is licensed under the MIT license.