Create From HTMLCanvas - Svelte

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/index.js';

// Draw the text 'img.ly' to the demo canvas
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
ctx.font = '100px Arial';
ctx.fillText('img.ly', 120, 270);

const dataURL = canvas.toDataURL();

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/assets'
};

CreativeEngine.init(config).then(async (engine) => {
  let scene = await engine.scene.createFromImage(dataURL);

  // Attach engine canvas to DOM
  document.getElementById('cesdk_container').append(engine.element);
});

<!DOCTYPE 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" />
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      html {
        overscroll-behavior-x: contain;
      }
    </style>
  </head>

  <body>
    <div id="cesdk_container" style="width: 100%; height: 100vh"></div>
    <canvas id="my-canvas" width="512px" height="512px" hidden></canvas>
    <script type="module" src="index.js">
    </script>
  </body>
</html>

In this example, we will show you how to initialize the CreativeEditor SDK with an initial image provided from a canvas.

Starting from an existing image allows you to use the editor for customizing individual assets. This is done by using engine.scene.createFromImage(url: string, dpi = 300, pixelScaleFactor = 1): Promise<number> and passing a URL as argument. The dpi argument sets the dots per inch of the scene. The pixelScaleFactor sets the display’s pixel scale factor.

To use the image drawn by a canvas as the initial image, acquire a dataURL containing the canvas contents via canvas.toDataURL().

const dataURL = canvas.toDataURL();

Use the created URL as a source for the initial image.

let scene = await engine.scene.createFromImage(dataURL);

When starting with an initial image, the scenes page dimensions match the given image, and the scene is configured to be in pixel design units.

To later save your scene, see Saving Scenes.

Full Code#

Here’s the full code:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/index.js';

// Draw the text 'img.ly' to the demo canvas
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
ctx.font = '100px Arial';
ctx.fillText('img.ly', 120, 270);

const dataURL = canvas.toDataURL();

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL:
    'https://cdn.img.ly/packages/imgly/cesdk-engine/1.60.0/assets',
};

CreativeEngine.init(config).then(async engine => {
  let scene = await engine.scene.createFromImage(dataURL);

  // Attach engine canvas to DOM
  document.getElementById('cesdk_container').append(engine.element);
});