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.
These are some examples of apps with editing extensions:
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.
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.
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.
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.
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.
- An extension must never compress, resize, or transform a user's image in an unsurprising way. For guidelines on producing a predictable output, see Generate an unsurprising output image.
- 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.
// Get helper methods for working with images
const { imageHelpers } = window.canva;
// Initialize the client
const canva = window.canva.init();
// The extension has loaded
canva.onReady(async (opts) => {
// Convert the user's image into a HTMLCanvasElement
const canvas = await imageHelpers.toCanvas(opts.image);
// Get a 2D drawing context
const context = canvas.getContext("2d");
// Invert the colors of the user's image
context.filter = "invert(100%)";
// Render the user's image in the iframe
document.body.appendChild(canvas);
// Render the control panel (this is required even if the
// extension doesn't have rich controls)
canva.updateControlPanel([]);
});
// Canva has requested the extension to update the user's image
canva.onImageUpdate(async (opts) => {
// Get the updated image
const img = await imageHelpers.toImageElement(opts.image);
// Get the HTMLCanvasElement that contains the user's image
const canvas = document.querySelector("canvas");
// Get a 2D drawing context
const context = canvas.getContext("2d");
// Draw the updated image into the HTMLCanvasElement
context.drawImage(img, 0, 0, canvas.width, canvas.height);
});
// Canva has requested the extension to save the user's image
canva.onSaveRequest(async () => {
// Get the HTMLCanvasElement that contains the user's image
const canvas = document.querySelector("canvas");
// Return the image to Canva
return await imageHelpers.fromCanvas("image/jpeg", canvas);
});
Last modified 5mo ago