Platform concepts
Extensions
Frontend development
Backend development
Client API
Server API
Reference
Editing extensions
What is an editing extension? Why create one?
An editing extension adds image effects and filters to Canva. Users can access these effects via the Edit image panel and apply them to their images.
Examples of editing extensions
These are some examples of apps with editing extensions:
Supported file types
An editing extension can apply effects to the following types of files:
- Raster (JPG and PNG)
- Vector (SVG)
You can configure the supported file types via the Developer Portal.
How users experience editing extensions
When a user selects an image in their design, an Effects button is available in the toolbar. If the user clicks this button, their installed editing extensions appear in the side panel.
With presets
When an editing extension supports presets, the presets appear as thumbnails in the Edit image panel. The user can select the preset to apply it to their image. If the preset is customizable, the user can select it again to tweak the settings of the preset.
Without presets
When an editing extension doesn't support presets, it's listed under the Tools heading. If the user opens the extension, it renders controls that let the user adjust the effect that's applied to their image.
How editing extensions work
At its most basic, an editing extension is a JavaScript file.
When a user opens an editing extension, Canva places an iframe on top of the user's image and embeds the JavaScript file in the iframe.
Canva also injects a JavaScript client into the iframe. This client lets the extension interact with the Canva editor and manipulate the user's image.
When the user finishes editing their image, the extension returns the manipulated image to Canva. Canva then uploads the new image to the user's account, closes the iframe, and updates the image on the page.
From the user's perspective, the addition and removal of the iframe is invisible.
If an extension can't manipulate the user's image in the browser, such as when an effect relies on machine learning, it can use remote image processing to process the user's image on a server.
Limitations
- For the sake of security, editing extensions run inside an iframe. As a result, they don't have access to certain browser APIs, such as the Clipboard API.
Example
1
// Get helper methods for working with images
2
const { imageHelpers } = window.canva;
3
​
4
// Initialize the client
5
const canva = window.canva.init();
6
​
7
// The extension has loaded
8
canva.onReady(async (opts) => {
9
// Convert the user's image into a HTMLCanvasElement
10
const canvas = await imageHelpers.toCanvas(opts.image);
11
​
12
// Get a 2D drawing context
13
const context = canvas.getContext("2d");
14
​
15
// Invert the colors of the user's image
16
context.filter = "invert(100%)";
17
​
18
// Render the user's image in the iframe
19
document.body.appendChild(canvas);
20
​
21
// Render the control panel (this is required even if the
22
// extension doesn't have rich controls)
23
canva.updateControlPanel([]);
24
});
25
​
26
// Canva has requested the extension to update the user's image
27
canva.onImageUpdate(async (opts) => {
28
// Get the updated image
29
const img = await imageHelpers.toImageElement(opts.image);
30
​
31
// Get the HTMLCanvasElement that contains the user's image
32
const canvas = document.querySelector("canvas");
33
​
34
// Get a 2D drawing context
35
const context = canvas.getContext("2d");
36
​
37
// Draw the updated image into the HTMLCanvasElement
38
context.drawImage(img, 0, 0, canvas.width, canvas.height);
39
});
40
​
41
// Canva has requested the extension to save the user's image
42
canva.onSaveRequest(async () => {
43
// Get the HTMLCanvasElement that contains the user's image
44
const canvas = document.querySelector("canvas");
45
​
46
// Return the image to Canva
47
return await imageHelpers.fromCanvas("image/jpeg", canvas);
48
});
Copied!
Last modified 6mo ago