https://github.com/completejavascript/tint-color-js
Create Tint Color for Images Using JavaScript.
https://github.com/completejavascript/tint-color-js
javascript tint tint-color
Last synced: 9 months ago
JSON representation
Create Tint Color for Images Using JavaScript.
- Host: GitHub
- URL: https://github.com/completejavascript/tint-color-js
- Owner: completejavascript
- License: mit
- Created: 2018-01-03T10:09:40.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-19T04:53:29.000Z (over 7 years ago)
- Last Synced: 2025-02-08T14:45:16.549Z (10 months ago)
- Topics: javascript, tint, tint-color
- Language: JavaScript
- Homepage: https://codepen.io/completejavascript/full/vpWyjG
- Size: 26.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 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
```js
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
* [Apply Tint Color for Images Using TintColor.js](https://codepen.io/completejavascript/pen/vpWyjG)
* [JavaScript Tint Color](https://completejavascript.com/javascript-tint-color-thay-doi-mau-sac-buc-anh/)
## Visit me
* [Complete JavaScript](https://completejavascript.com)