const { imageHelpers } = window.canva;
const canva = window.canva.init();
canva.onReady(async (opts) => {
// Convert the CanvaElement into a CanvaImageBlob
const image = await imageHelpers.fromElement(opts.element);
// Convert the CanvaImageBlob into an HTMLCanvasElement
const canvas = await imageHelpers.toCanvas(image);
// Render the HTMLCanvasElement
document.body.appendChild(canvas);
// Render the extension's rich controls
canva.onControlsEvent(async (event) => {
// Show the loading spinner
canva.toggleSpinner("preview", true);
// Remotely process the user's image
const result = await canva.remoteProcess();
const image = await imageHelpers.fromUrl(result.previewImage.url);
// Get the HTMLCanvasElement
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
// Render the processed image
const img = await imageHelpers.toImageElement(image);
context.drawImage(img, 0, 0, canvas.width, canvas.height);
// Hide the loading spinner
canva.toggleSpinner("preview", false);
function renderControls() {
id: "startRemoteImageProcessing",
label: "Start remote image processing...",
canva.updateControlPanel(controls);