Images

When creating a content extension, one of the available options for the Content type field is Images. If you select this option, the extension can import image files, such as photos or illustrations, into Canva.

These are some examples of apps with content extensions that support images:

• Brandfetch⁠(opens in a new tab or window)
• Bynder⁠(opens in a new tab or window)
• Pixton⁠(opens in a new tab or window)

To find more examples, see canva.com/apps⁠(opens in a new tab or window).

This section describes the types of images a content extension can import into Canva.

You can't import GIFs into Canva as images. You can only import them as embeds or videos.

• Under 25 MB in size
• Not more than 100 million total pixels (width × height)

• Under 25 MB in size
• Not more than 100 million total pixels (width × height)

• Under 25 MB in size
• Not more than 100 million total pixels (width × height)

• Under 10 MB in size
• Saved with an SVG Profile of "SVG 1.1"

The following elements are stripped from SVG images:

• script
• metadata
• style

• Cross-Origin Resource Sharing (CORS) can interfere with the importing of images. To learn more, see CORS.
• For guidelines on choosing the layout that's most appropriate for your content type, see Choose the best layout.

const axios = require("axios");
const express = require("express");

const app = express();

app.use(express.json());
app.use(express.static("public"));

app.post("/content/resources/find", async (request, response) => {
  // Get a list of images
  const { data } = await axios.get("https://picsum.photos/v2/list");

  // Create an array of resources
  const resources = data.map((resource) => {
    return {
      type: "IMAGE",
      id: resource.id, // This ID should always refer to the same piece of media
      name: resource.author || resource.id,
      thumbnail: {
        url: resource.download_url,
      },
      url: resource.download_url,
      contentType: "image/jpeg",
    };
  });

  // Respond with the resources
  response.send({
    type: "SUCCESS",
    resources,
  });
});

app.listen(process.env.PORT || 3000);