Cropper — usage examples

Cropper ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { Cropper } from '@rozie-ui/cropper-react';
import 'cropperjs/dist/cropper.css';

export function Demo() {
  const [data, setData] = useState();
  return (
    <Cropper
      src="/photo.jpg"
      data={data}
      onDataChange={setData}
      aspectRatio={16 / 9}
      viewMode={1}
      onCrop={(e) => console.log(e)}
    />
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import Cropper from '@rozie-ui/cropper-vue';
import 'cropperjs/dist/cropper.css';

const data = ref();
</script>

<template>
  <Cropper
    src="/photo.jpg"
    v-model:data="data"
    :aspect-ratio="16 / 9"
    :view-mode="1"
    @crop="(e) => console.log(e)"
  />
</template>

svelte

<script lang="ts">
  import Cropper from '@rozie-ui/cropper-svelte';
  import 'cropperjs/dist/cropper.css';

  let data = $state();
</script>

<Cropper
  src="/photo.jpg"
  bind:data
  aspectRatio={16 / 9}
  viewMode={1}
  oncrop={(e) => console.log(e)}
/>

import { Component } from '@angular/core';
import { Cropper } from '@rozie-ui/cropper-angular';
// Add 'cropperjs/dist/cropper.css' to your global styles.

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Cropper],
  template: `
    <Cropper
      src="/photo.jpg"
      [(data)]="data"
      [aspectRatio]="16 / 9"
      [viewMode]="1"
      (crop)="onCrop($event)"
    />
  `,
})
export class DemoComponent {
  data: any;
  onCrop(e: any) { console.log(e); }
}

tsx

import { createSignal } from 'solid-js';
import { Cropper } from '@rozie-ui/cropper-solid';
import 'cropperjs/dist/cropper.css';

export function Demo() {
  const [data, setData] = createSignal();
  return (
    <Cropper
      src="/photo.jpg"
      data={data()}
      onDataChange={setData}
      aspectRatio={16 / 9}
      viewMode={1}
      onCrop={(e) => console.log(e)}
    />
  );
}

import '@rozie-ui/cropper-lit';
import 'cropperjs/dist/cropper.css';

// <rozie-cropper> is a custom element. Bind `src`/`data` as properties and
// listen for `data-change` (the two-way change channel) + `crop`.
const el = document.querySelector('rozie-cropper');
el.src = '/photo.jpg';
el.aspectRatio = 16 / 9;
el.addEventListener('data-change', (e) => { el.data = e.detail; });
el.addEventListener('crop', (e) => console.log(e.detail));

Imperative handle

Beyond props and events, Cropper exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Cropper, type CropperHandle } from '@rozie-ui/cropper-react';

const cropper = useRef<CropperHandle>(null);
// <Cropper ref={cropper} ... />
const url = cropper.current?.getCroppedDataURL();
cropper.current?.rotateBy(90);

vue

<script setup>
import { ref } from 'vue';
const cropper = ref();      // template ref
</script>

<template>
  <Cropper ref="cropper" ... />
  <button @click="cropper.rotateBy(90)">Rotate</button>
</template>

svelte

<script>
  let cropper;              // component instance via bind:this
</script>

<Cropper bind:this={cropper} ... />
<button onclick={() => cropper.rotateBy(90)}>Rotate</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Cropper) cropper!: Cropper;  // or the viewChild() signal
  rotate() { this.cropper.rotateBy(90); }
  export() { return this.cropper.getCroppedDataURL(); }
}

tsx

import { Cropper, type CropperHandle } from '@rozie-ui/cropper-solid';

let handle: CropperHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Cropper ref={(h) => (handle = h)} ... />;
handle?.rotateBy(90);
const url = handle?.getCroppedDataURL();

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-cropper');
el.rotateBy(90);
const url = el.getCroppedDataURL();

Cropper — usage examples ​

Usage ​

Imperative handle ​

See also ​

Cropper — usage examples

Usage

Imperative handle

See also