DraggableImage

API reference for the DraggableImage component.

Usage

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",
          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",
        });
      }}
    />
  );
}

tsx

Props

#srcstring

Required

The URL or data URL of the image to embed in the app's user interface.

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

#resolveImageReffunction

Required

A function that returns the result of the upload method.

#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.