<div>
    <div class="item" id="originImg"></div>
  </div>
  <div>
    <div class="item" id="newImg1"></div>
    <div class="item" id="newImg2"></div>
    <div class="item" id="newImg3"></div>
  </div>

<script src="https://codepen.io/completejavascript/pen/opoYRb.js"></script>
 .item {
      display: inline-block;
 }
const srcImg = "https://res.cloudinary.com/drcrre4xg/image/upload/c_scale,w_200/v1515227140/star-yellow_hjfybq.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";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.