remoteProcess

Sends the user's image to a backend server for remote image processing. You can only call this method when an editing extension's Extension type is Remote image processing.
Notes
If the /editing/image/process or /editing/image/process/get endpoint returns an error, the remoteProcess method throws an error with the same error code.
You can control the maximum dimensions of the user's image via the Max image dimensions field in the Developer Portal. The maximum value is 4096 pixels on the longest side.
You can't call the remoteProcess method from the onPresetsRequest callback.
If you await on the remoteProcess method from the onReady callback, the onReady callback will likely time out.
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
  // Render the extension's rich controls
15
  renderControls();
16
});
17
​
18
canva.onControlsEvent(async (event) => {
19
  // Show the loading spinner
20
  canva.toggleSpinner("preview", true);
21
​
22
  // Remotely process the user's image
23
  const result = await canva.remoteProcess();
24
  const image = await imageHelpers.fromUrl(result.previewImage.url);
25
​
26
  // Get the HTMLCanvasElement
27
  const canvas = document.querySelector("canvas");
28
  const context = canvas.getContext("2d");
29
​
30
  // Render the processed image
31
  const img = await imageHelpers.toImageElement(image);
32
  context.drawImage(img, 0, 0, canvas.width, canvas.height);
33
​
34
  // Hide the loading spinner
35
  canva.toggleSpinner("preview", false);
36
});
37
​
38
function renderControls() {
39
  const controls = [
40
    canva.create("button", {
41
      id: "startRemoteImageProcessing",
42
      label: "Start remote image processing...",
43
    }),
44
  ];
45
  canva.updateControlPanel(controls);
46
}
Copied!
Parameters
Name
Type
Required
Description
opts
object
No
Options for remotely processing the user's image.
opts.blobs
Map<string, Blob>
No
Blobs the extension needs to process the user's image. The key is an ID for the Blob. The value is the Blob.
opts.settings
string
No
Settings the extension needs to process the user's image, such as the the dimensions of the viewport. You can use the JSON.stringify function to pass a JSON object via this parameter.
Returns
​Promise<RemoteProcessOutput>​
Types
RemoteProcessOutput
Represents the output of remote image processing.
Signature
1
type RemoteProcessOutput = {
2
  image?: CanvaImageBlob;
3
  fullImage?: CanvaImageUrl;
4
  previewImage?: CanvaImageUrl;
5
  blobUrls?: ReadonlyMap<string, string>;
6
  metadata?: string;
7
};
Copied!
Properties
Name
Type
Required
Description
image (deprecated)
​CanvaImageBlob​
No
The user's image.
fullImage
​CanvaImageUrl​
No
The full-resolution version of the user's image.
previewImage
​CanvaImageUrl​
No
The medium-resolution version of the user's image.
blobUrls
Map<string, string>
No
The Blobs returned by the server. The key is the ID of the Blob. The value is the URL of the Blob.
metadata
string
No
Arbitrary metadata returned by the server.

updateLayout

reportError

Last modified 2mo ago

Copy link

Contents