Polotno Button

<script src="https://embed.polotno.com/button-v1.js"></script>

<button id="polotno-button">Open Editor</button>

<script>
const button = document.getElementById('polotno-button');
button.addEventListener('click', () => {
  window.createPolotnoEditor({
    key: 'my-api-key',
    onPublish: ({ dataURL, json }) => {
      // do something with generated image
      // also you can save json somewhere and load it later
    },
  });
});
</script>

function inchesToPx(inches) {
  var dpi = 72; // dots per inch
  return inches * dpi;
}

window.createPolotnoEditor({
  key: 'my-api-key',
  // select sections you want to show
  sections: [
    'templates',
    'photos',
    'text',
    'elements',
    'upload',
    'background',
    'layers',
    'size',
  ],
  defaultSection: 'photos', // what section open by default
  // initial size of the canvas
  width: inchesToPx(20),
  height: inchesToPx(10),
  // load template from json file
  jsonUrl:
    'https://api.polotno.com/templates/2021-10-25-instagram-post-sunday-reminder.json',
  // load template from json object
  json: {
    // json object of the design
  },
  // change default text of the publish button
  publishLabel: 'Save',
  onPublish: ({ dataURL, json }) => {
    document.getElementById('result').src = dataURL;
    console.log('json', json);
  },
  // optionally you can react to any change in the editor
  // for example temporary save design somewhere to restore it later via jsonUrl
  // you may need to save JSON manually to your server
  onChange: ({ json }) => {
    console.log('json', json);
  },
  // you can pass initial uploads to the editor
  // they will be shown in the upload section
  uploads: [
    {
      url: 'https://example.com/image.jpg',
      preview: 'https://example.com/image.jpg',
    },
  ],
  // you can enable or disable animations
  // by default animations are disabled
  // warning - editor can't export into video or gif yet
  // you have to use Cloud API or your own server for that
  animationsEnabled: true,

  // also you can translate full UI, ask us for the list of keys
  translations: {
    sidePanel: {
      templates: 'Шаблоны',
    },
  },
});