DraggableImage

API reference for the DraggableImage component.

Usage

Data URL

import React from "react";
import { DraggableImage } from "components/draggable_image";

export function App() {
  const dataUrl = createGradient("#ff0099", "#0000ff");
  return <DraggableImage src={dataUrl} />;
}

function createGradient(color1: string, color2: string): string {
  const canvas = document.createElement("canvas");

  canvas.width = 640;
  canvas.height = 360;

  const ctx = canvas.getContext("2d");

  if (!ctx) {
    throw new Error("Can't get CanvasRenderingContext2D");
  }

  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);

  gradient.addColorStop(0, color1);
  gradient.addColorStop(1, color2);

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  return canvas.toDataURL();
}

External URL

import React from "react";
import { DraggableImage } from "components/draggable_image";
import { upload } from "@canva/asset";

export function App() {
  return (
    <DraggableImage
      src="https://www.canva.dev/example-assets/image-import/thumbnail.jpg"
      resolveImageRef={() => {
        return upload({
          type: "IMAGE",
          id: "uniqueidgoeshere",
          mimeType: "image/jpeg",
          url: "https://www.canva.dev/example-assets/image-import/image.jpg",
          thumbnailUrl:
            "https://www.canva.dev/example-assets/image-import/thumbnail.jpg",
        });
      }}
    />
  );
}

Props

The expected props depend on the format of the image data:

Data URL
External URL

When the image data comes from a data URL, the following props are accepted:

#srcstring

Required

The URL or data URL of the image to embed in the app's user interface. By default, this is also the image that's added to the user's design at the end of a drag event.

This image must have a MIME type of "image/jpeg" or "image/png".

#fullSizeSrcstring

Optional

The data URL of the full-size image, in pixels. This is this image that's added to the user's design and uploaded to the user's account at the end of a drag event. If omitted, the image from the src prop is used.

This image must have a MIME type of "image/jpeg" or "image/png".

#fullSizeobject

Optional

The dimensions of the full-size image, in pixels.

#fullSize.widthnumber

Sometimes required

The width of the full-size image, in pixels.

#fullSize.heightnumber

Sometimes required

The height of the full-size image, in pixels.

#previewSrcstring

Optional

The data URL of the image used in the drag preview. This is the image that appears under the user's cursor during the drag event. If omitted, the image from the src prop is used.

This image must have a MIME type of "image/jpeg" or "image/png".

#previewSizeobject

Optional

The dimensions of the drag preview, in pixels.

#previewSize.widthnumber

Sometimes required

The width of the drag preview, in pixels.

#previewSize.heightnumber

Sometimes required

The height of the drag preview, in pixels.