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"
  }
}