GuidesChangelogAPI ReferenceExamplesStatus

Export Image

Suggest Edits

📘

Feature Availability

This feature is only available in plans that include Full API access i.e Business and Growth.

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.

NameDescription
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
})

REST API

If you want to generate an image on the server-side, you can use our REST Export 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 Export API documentation.

Response

The API response will return an uploaded image URL.

{
  "success": true,
  "data": {
    "url": "https://.../1593082715347-8LCcNZuuBpU4D92W.png"
  }
}

Updated over 1 year ago

What’s Next