Grid Embed Demo

An example of how to embed Grid into an application for image selection.

The example shown here is written without any frameworks and in standard ES5, demonstrating the basic technique.

Demo

How it works

Grid uses postMessage to talk to the parent page when it has been iframed. It sends a message when a crop is created or selected. The message data represents a crop.

In this demo, we:

• add Grid in an iframe to the DOM when the Pick image button is clicked
• add an event handler for the message event on the window object
• in the event handler, we extract the url to the master crop and add it in an img to the DOM

Requirements

• node
• npm
• nginx
• dev-nginx

Setup

Run ./script/setup

Usage

Once all setup steps are complete, run npm start to start a http server. You can now go to https://grid-embed-demo.local.dev-gutools.co.uk.