onSaveRequest

Registers a callback that runs when the user persists the changes to their image.
The onImageUpdate callback runs immediately before the onSaveRequest callback.
Usage
1
const { imageHelpers } = window.canva;
2
const canva = window.canva.init();
3
​
4
canva.onReady(async (opts) => {
5
  // Convert the CanvaElement into a CanvaImageBlob
6
  const image = await imageHelpers.fromElement(opts.element);
7
​
8
  // Convert the CanvaImageBlob into an HTMLCanvasElement
9
  const canvas = await imageHelpers.toCanvas(image);
10
​
11
  // Render the HTMLCanvasElement
12
  document.body.appendChild(canvas);
13
});
14
​
15
canva.onSaveRequest(async () => {
16
  const canvas = document.querySelector("canvas");
17
  return await imageHelpers.fromCanvas("image/jpeg", canvas);
18
});
Copied!
Parameters
Name
Type
Required
Description
handler
​SaveRequestHandler​
Yes
The callback that runs when Canva emits a save request.
Returns
void
Types
SaveRequestHandler
The callback that runs when Canva emits a save request. If the callback returns a CanvaImageBlob, Canva persists the changes to the user's image. If the callback returns a CanvaElement, Canva calls the updateLayout method before persisting the changes to the user's image. If the method returns undefined, Canva doesn't persist any changes to the image.
Signature
1
() => CanvaImageBlob | Promise<CanvaImageBlob> | CanvaElement | Promise<CanvaElement> | undefined | Promise<undefined>
Copied!
Returns
​CanvaImageBlob​
​Promise<CanvaImageBlob>​
​CanvaElement​
​Promise<CanvaElement>​
undefined
Promise<undefined>

onImageUpdate

onTouchModeExit

Last modified 7mo ago

Copy link

Contents