Image layers

$.addImage(props, { source }) adds a still image. iLoveVideoEditor auto-detects the format from the URL or content-type. Positioning, sizing, and rotation all share the same model as text layers.

// LiveFlowDemo
const $ = new iLoveVideoEditor({ width: 512, height: 512, fps: 30 });

// Ken-Burns drift on a full-cover image with a label on top.
const bg = $.addImage(
  { fit: 'cover', scale: 1 },
  { source: 'https://ilovevideoeditor.com/samples/sample.jpg' },
);
bg.animate(
  { scale: 1,    position: [0.55, 0.5] },
  { scale: 1.18, position: [0.45, 0.5] },
  { duration: '4s', easing: 'easeInOut', wait: false },
);

const label = $.addText(
  {
    text: 'Beautiful scenery',
    fontSize: 4.5, fontWeight: 800, color: '#fff',
    textShadowColor: 'rgba(0,0,0,0.55)', textShadowBlur: 0.6,
  },
  {
    transitionIn:  { transition: 'fade', duration: '600ms' },
    transitionOut: { transition: 'fade', duration: '500ms' },
  },
);
$.wait('3s');
label.remove();
$.wait('500ms');
bg.remove();
return $;

const logo = $.addImage(
  {
    position: [0.5, 0.4],
    scale: 0.8,
  },
  {
    source: 'https://example.com/logo.png',
    transitionIn:  { transition: 'zoom', duration: '800ms', easing: 'easeOut' },
    transitionOut: { transition: 'fade', duration: '500ms' },
  },
);
$.wait('2s');
logo.remove(); // triggers transitionOut

Properties

Prop	Type / default	Notes
source (setting)	string	URL, data URL, or path. SVG, PNG, JPG, WebP, GIF all supported.
fit	`cover	contain/contain`
position / anchor	[x, y]	Same as text.
scale / rotation / opacity		Animatable transforms.
borderRadius	string	CSS radius. Clips the image.
filterBlur	0–1	Normalised blur. Animatable.
filterBrightness	1.0	Animatable.
filterSaturate	1.0	Animatable.
startTime (setting)	Time	Rarely needed — the flow pointer sets it for you.

Ken Burns pan

const bg = $.addImage(
  { fit: 'cover', scale: 1.1 },
  { source: '/hero.jpg' },
);
bg.animate(
  { scale: 1.1, position: [0.55, 0.5] },
  { scale: 1.25, position: [0.45, 0.5] },
  { duration: '8s', easing: 'linear', wait: false },
);
// Foreground content runs on top while the background drifts.