Skip to content

completejavascript/tint-color-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TintColor.js

Create Tint Color for Images Using JavaScript.

Usage

  • Constructor: TintColor(srcImage, tintColor)

    • srcImage: (string) url of image.
    • tintColor: (string) new color as Hex or RGB or RGBA. Example: '#ff00ff' or 'rgb(255, 0, 255)' or 'rgb(255, 0, 255, 0.5)'
  • API:

    • setSourceImage(srcImage)
    • setTintColor(tintColor)
    • run()

Example

const srcImg = "star-yellow.png";

document.addEventListener("DOMContentLoaded", event => {
  let $ = document.querySelector.bind(document); 
  setImage($("#originImg"), srcImg, 150, 150);
  
  new TintColor(srcImg, "#ff0000").run()
  .then(result => setImage($("#newImg1"), result.url, 150, 150))
  .catch(err => console.log(err));

  new TintColor(srcImg, "rgba(255, 0, 255, 0.8)").run()
  .then(result => setImage($("#newImg2"), result.url, 150, 150))
  .catch(err => console.log(err));

  new TintColor(srcImg, "rgb(127, 127, 255)").run()
  .then(result => setImage($("#newImg3"), result.url, 150, 150))
  .catch(err => console.log(err));
});

function setImage(divElement, srcURL, width, height) {
  divElement.style.width = width + "px";
  divElement.style.height = height + "px";
  divElement.style.backgroundImage = "url('" + srcURL + "')";
  divElement.style.backgroundSize = "" + width + "px " + height + "px";
}

References

Visit me

Releases

No releases published

Packages

No packages published