Scale nine-patch image using JavaScript's canvas.
- 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.
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 + "')"; }