Images

Images use the standard selection and transform mechanics with an undecorated image surface. This example embeds two small original monochrome landscapes so it works without an external image server.

Loading interactive example…Open in new tab ↗

Opening the live canvas…

Try it

Choose Day or Night, then try contain, cover and fill. Contain preserves the full image, cover crops to the frame, and fill stretches to the frame. Changing the image preserves the chosen fit. Clear removes the source; undo restores it. Use the canvas resize and rotation handles to transform it.

This example uses canonical data URIs, not temporary browser blob URLs. File pickers, uploads, remote-resource permissions and large-image memory budgets are host responsibilities and are not demonstrated here.

Source

void replaceExampleImage(
  DrawingSession session,
  String uri, {
  DiagramImageFit? fit,
}) {
  final current = session.document.shapeById('image')?.imageSource;
  session
      .setImageSource(
        'image',
        DiagramImageSource(
          uri: uri,
          fit: fit ?? current?.fit ?? DiagramImageFit.contain,
        ),
      )
      .requireAllowed();
}

The fixture constants are in apps/demo/lib/examples/basics/image_samples.dart. See image content for the command's admission and history contract, and output for resource preparation during export.