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');
});