InstaGrid

The js library to do exactly what InstGrid Application does. It splits any image into 6 parts. Like the image below:

Installation

with NPM: npm install instagrid --save

with Yarn: yarn add instagrid

browser: Just get the last version from dist folder and use it. It's your choice whether to use the script.es6.js or script.es5.js.

Usage

new InstaGrid([INPUT_ELEMENT], [RESULT_CONTAINER])

Params:
  * the input[type=file] element
  * the resulting container className

<input type="file" id="file" onchange="runLayout(this)">
<div class="result">
  <!-- This is where our result would be rendered to DOM -->
</div>  

<script src="PATH_TO_INSTAGRID.JS"></script>
<script>
  function runLayout(elem) {
    var layout = new InstaGrid(elem, '.result')
    layout.render(function(self) {
      // You have the whole `layout` object here.
    })
  }
</script>

Available Methods

render: Renders 6 resulting image parts into the result_container element. It also accepts a callback that runs after all images been rendered to the DOM.

getSources: Returns an array of 6 image objects with src and position properties. The position property is an object containing top, left and order props of the image in order.

Development

Clone the repository and run yarn start or npm start inside the clone. This will create a local server on port 4000. Visit the test case by heading to localhost:4000 in your browser.

---

MIT licensed. Credit: Farskid (Farzad YZ)