Documentation

Events

CropGuide fires a selection of events to make it possible to integrate CropGuide more closely with your webpage.

• init
• load
• open
• close
• intercept
• process
• invalid
• ignore

Demo

Use the file input field below and see the CropGuide events and their contents logged to your browser developer console and the textarea.

Events

Init

$cropguide:init is fired when CropGuide initialises, if this event doesn’t fire then either CropGuide is not supported on the browser or the script failed to load.

document.addEventListener('$cropguide:init', (e) => {
    console.log('CropGuide has initialiased');
});

Load

$cropguide:load is fired when CropGuide is ready.

Open

$cropguide:open fires when the editor modal opens.

Close

$cropguide:close fires when the editor modal closes.

Intercept

$cropguide:intercept fires when CropGuide intercepts a file selection. The detail property of the event is set to the original event object.

document.addEventListener('$cropguide:intercept', (e) => {
    console.log('The original file input event', e.detail);
});

Process

$cropguide:process fires when CropGuide has generated a new image.

The detail property of the event is set to { src, dest } an object containing both the original file and the resulting image.

<img id="res" />

Let’s assign the resulting image to the <img/> element.

document.addEventListener('$cropguide:process', (e) => {
    // Preview the resulting image
    window.res.src = URL.createObjectURL(e.detail.dest);
});

Invalid

$cropguide:invalid fires when CropGuide determines the selected image is too small to process. The detail property of the event is set to { src } an object containing the original image file.

Error

$cropguide:error fires when an error has occurred. The detail property of the event is set to { src, error } an object containing the original image file and an error object.

Ignore

$cropguide:ignore fires when the editor ignores a file, for example when it’s not an image. The detail property is set to { src }, src being the file object that is ignored.