<p>Show original nine-patch Image:</p>
<div id="ninePatchImg"></div><br>

<p>Show image after scaling with handling nine-patch Image:</p>
<div id="normalImg"></div><br>

<p>Show image after scaling without handling nine-patch image:</p>
<div id="testImg"></div><br>

<script src="https://codepen.io/completejavascript/pen/NXBagO.js"></script>
const srcImg = 'https://res.cloudinary.com/drcrre4xg/image/upload/v1516665655/test_normal.9_gjksbl.png';
const WIDTH = 150;
const HEIGHT = 150;

document.addEventListener("DOMContentLoaded", event => {
  let $ = document.querySelector.bind(document);

  new NinePatch().getSize(srcImg)
  .then(result => setImage($('#ninePatchImg'), result.url, result.width, result.height))
  .catch(error => console.log(error));

  new NinePatch().scaleImage(srcImg, WIDTH, HEIGHT)
  .then(result => setImage($('#normalImg'), result, WIDTH, HEIGHT))
  .catch(error => console.log(error));

  new NinePatch().getSize(srcImg)
  .then(result => setImage($('#testImg'), result.url, result.width + 50, result.height + 100))
  .catch(error => console.log(error));
});

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.