Sealpixel

Appearance

Edit in the browser, render on your server ​

The user edits in the browser, and your server renders the final image. Sealpixel covers two parts of this. The editor turns the original into an edit log, and the renderer turns the original and the log into the file. Everything between them belongs to your application.

Edit in the browser, render on your serverYour application gives the editor the original. The editor decodes it once and previews every edit on a working copy. The editor hands out the log and its index. Your application sends the original and the log to your server, and your server calls the renderer. The renderer checks the original against the log, renders it and returns the file with its hash and size.YOUR APPLICATIONYour appSEALPIXEL EDITOREditorYOUR SERVERYour server@SEALPIXEL/RENDERRenderer1originalDecode onceedit aworking copy23{ log, index }4original + { log, index }5render()Checkrender, encode67bytes, hash, size
The tinted lanes are Sealpixel: the editor and the renderer. The dashed lanes are your application and your server: how the original reaches the editor, where the log is stored, and how the job reaches your server.

What the editor hands out ​

The editor takes the original as its src. It reads the original once, computes the size and the sha256 that go into the log, and previews every edit on a working copy. When the user is done, the editor hands out the log and the position in it:

ts
const { log, index } = editor.getEditLog();

Store both. After an undo, the log still holds the step that the user took back, and index says where the edit stands. The same object resumes the editor at that step (Resume editing).

What the renderer needs ​

The renderer needs these inputs:

  • The original, byte for byte: the file that the editor loaded. A scaled or re-encoded copy has another sha256 and another size, and the renderer refuses it with SOURCE_MISMATCH.
  • The log.
  • The index, as upTo. Without it, a step that the user took back reaches the render.
  • The bytes of every font and image that the log uses, as assets. The editor had them in the browser, and the renderer loads none itself. An uploaded sticker is in log.assets, with its sha256 but without its bytes. See Assets.
ts
const result = await renderer.render({
  original,
  editLog: saved.log,
  upTo: saved.index,
  output: { format: 'image/jpeg', quality: 0.9 },
});

Register the same plugins and the same pluginOptions as the editor. A plugin that only the editor has makes the log fail with UNKNOWN_PLUGIN.

What comes back ​

result.bytes is the same file that a browser export of the same log at the same index produces. result.hash is its sha256, so you can compare the two. result.width and result.height are the size of the render. Store or return the file the way your application needs.