Welcome,

The Widget API: Methods

getParams(asJSON )

gets format and parameters of the preview API call currently displaying an image in the widget.

Key Type Description

asJSON

boolean

Determines if the parameters are formatted as JSON or URL encoded.

Returns:

A string of formatted parameters

Example

without asJSON

const params = tweekIt.getParams(); console.log(params);

Returns

fmt=jpg&alpha=false&page=1&elliptical=false&x1=356&y1=439&x2=497&y2=579&bg=0x000000

asJSON as true

const params = tweekIt.getParams(true); console.log(params);

Returns

{ fmt:"jpg", alpha:false, page:1, elliptical:false, x1:356, y1:439, x2:497, y2:579, bg:"0x000000" }

addEventListener( name, listener )

Behaves much like the standard function of the same name, but accepts custom names for the TweekIT object.

Key Type Description

name

string

Should be one of 'render|update|propertychange’

listener

function

A function to handle emitted events

Example

we can use update , render , propertychange as our events

const options = { appId: '{ your app ID }', message: 'drop or click to upload image', cropWidth: 500, cropHeight: 500, cropOnRender: true, header: { 'Referrer Policy': 'strict-origin-when-cross-origin' } }; const tweekit = new Tweekit('#canvas0', options}); // render events fire here tweekIt.addEventListener('render', (e) => { alert('Tweekit instance is rendered!'); }); // update events fire here tweekIt.addEventListener('update', (e) => { alert('Tweekit instance is updated!'); }); // propertychange events fire here tweekIt.addEventListener('propertychange', (e) => { alert('Tweekit instance is propertychange!'); });

removeEventListener( name, listener )

Behaves much like the standard function of the same name, but accepts custom names for the TweekIT object.

Key Type Description

name

string

Should be one of 'render|update|propertychange’

listener

function | Event instance

The listener instance to remove

Example

Let's remove the update event

we can either choose one of the ff:
render , update , propertychange

const options = { appId: '{ your app ID }', message: 'drop or click to upload image', cropWidth: 500, cropHeight: 500, cropOnRender: true, header: { 'Referrer Policy': 'strict-origin-when-cross-origin' } }; const tweekit = new Tweekit('#canvas0', options}); const removeThisListener = (e) => { console.log('debugingstuff event', event); } // render events fire here tweekIt.removeEventListener('render', removeThisListener);

reset()

Resets the widget to it’s starting state

Example

index.html

<html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>TWEEKIT EXAMPLE</title> </head> <body> <div id="canvas0"></div> <button id="reset"> Reset Tweekit! </button> <script src="tweekit-widget.min.js"></script> <script src="script.js"></script> </body> </html>

script.js

const options = { appId: '{ your app ID }', message: 'drop or click to upload image', cropWidth: 500, cropHeight: 500, cropOnRender: true, header: { 'Referrer Policy': 'strict-origin-when-cross-origin' } }; const tweekit = new Tweekit('#canvas0', options}); const resetEl = document.getElementById('reset'); resetEl.onclick(() => { tweekit.reset(); });

result()

Gives you a blob of the tweekit result

Example

index.html

<html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>TWEEKIT EXAMPLE</title> </head> <body> <div id="canvas0"></div> <img id="resultImg" src=""/> <button id="getImgBttn"> Get Tweeked Img </button> <script src="tweekit-widget.min.js"></script> <script src="script.js"></script> </body> </html>

script.js

const options = { appId: '{ your app ID }', message: 'drop or click to upload image', cropWidth: 500, cropHeight: 500, cropOnRender: true, header: { 'Referrer Policy': 'strict-origin-when-cross-origin' } }; const tweekit = new Tweekit('#canvas0', options}); const getImgBttnEl = document.getElementById('getImgBttn'); const resultImgEl = document.getElementById('resultImg'); getImgBttnEl.onclick( async () => { const imgBlob = await tweekit.result(); const imgUrl = URL.createObjectURL(imgBlob); resultImgEl.src = imgUrl; });

download(filename )

fires a download event with you desired file name

Key Type Description

filename

string

desired filename for your downloaded file

Example

index.html

<html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>TWEEKIT EXAMPLE</title> </head> <body> <div id="canvas0"></div> <button id="downloadBttn"> Download </button> <script src="tweekit-widget.min.js"></script> <script src="script.js"></script> </body> </html>

script.js

const options = { appId: '{ your app ID }', message: 'drop or click to upload image', cropWidth: 500, cropHeight: 500, cropOnRender: true, header: { 'Referrer Policy': 'strict-origin-when-cross-origin' } }; const tweekit = new Tweekit('#canvas0', options}); const downloadBttnEl = document.getElementById('downloadBttn'); downloadBttnEl.onclick( async () => { tweekit.download('myawesomefile.jpg'); });