Export Image
Similar to the Export HTML function, you can also export a design in image format. This would upload the generated image to your connected File Storage and send the link to the callback function.
Note: Unlike HTML or plain text, images are not generated on the client. This function uses our cloud API to generate the image.
unlayer.exportImage(function(data) {
var json = data.design; // design json
var imageUrl = data.url; // image url
// Do something with the image url
})
Callback Parameters
The exportImage callback returns the following parameters.
Name | Description |
---|---|
design | This is the JSON of the design |
url | This is the URL of the generated image |
Export Options
You can also pass certain options to this function as a second parameter.
Merge Tags
If you want the Merge Tags in your design to be replaced by different values, you can pass the mergeTags
object to export options.
unlayer.exportImage(function(data) {
var json = data.design; // design json
var imageUrl = data.url; // image url
}, {
mergeTags: {
first_name: 'John',
last_name: 'Doe'
}
})
Full Page
If you want the exported image to be the full page design, you can use this option. It is enabled by default.
unlayer.exportImage(function(data) {
var json = data.design; // design json
var imageUrl = data.url; // image url
}, {
fullPage: false
})
Cloud API
If you want to generate an image on the server-side, you can use our Cloud API.
const fetch = require('node-fetch');
let url = 'https://api.unlayer.com/v2/export/image';
let options = {
method: 'POST',
headers: {'Content-Type': 'application/json', Authorization: 'Basic BASE64-ENCODED-API-KEY'},
body: JSON.stringify({
displayMode: 'email',
design: {}, // json of your design
mergeTags: {first_name: 'John', last_name: 'Doe'}
})
};
fetch(url, options)
.then(res => res.json())
.then(json => console.log(json))
.catch(err => console.error('error:' + err));
Learn more at Cloud API reference.
Response
The API response will return an uploaded image URL.
{
"success": true,
"data": {
"url": "https://.../1593082715347-8LCcNZuuBpU4D92W.png"
}
}
Updated about 2 months ago