Skip to content
Scale nine patch image using JavaScript's canvas.
JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Jan 15, 2018
NinePatch.js handle complex ninepatch image Apr 19, 2018
README.md fix with complex nine patch image Apr 19, 2018
index.html fix with complex ninepatch image Apr 19, 2018
index.js handle complex ninepatch image Apr 19, 2018
test_normal.9.png Add files via upload Jan 22, 2018

README.md

NinePatch.js

Scale nine-patch image using JavaScript's canvas.

Usage

  • APIs:
    • getSize(srcImg) => {url, width, height}: 'url' is the original image's url
    • scaleImage(srcImg, newWidth, newHeight) => url: 'url' is the new image's url, which is scaled.

Example

const srcImg = 'test_normal.9.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 + "')";
}

References

Visit me

You can’t perform that action at this time.