remoteProcess
API reference for the "remoteProcess" method.
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

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)
No
The user's image.
fullImage
No
The full-resolution version of the user's image.
previewImage
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.
Last modified 2mo ago