Image Cropper

<arc-image-cropper
  src="/uploads/avatar-original.jpg"
  aspect="1"
  height="320"
></arc-image-cropper>

<script>
  const cropper = document.querySelector('arc-image-cropper');

  cropper.addEventListener('arc-crop-change', (e) => {
    console.log('Crop (natural px):', e.detail);
  });

  // At upload time — natural-resolution export:
  async function upload() {
    const blob = await cropper.getCroppedBlob('image/jpeg', 0.9);
    const body = new FormData();
    body.append('avatar', blob, 'avatar.jpg');
    await fetch('/api/avatar', { method: 'POST', body });
  }
</script>

import { useRef } from 'react';
import { ImageCropper } from '@arclux/arc-ui-react';

function AvatarEditor({ src }: { src: string }) {
  const ref = useRef<HTMLElementTagNameMap['arc-image-cropper']>(null);

  const save = async () => {
    const blob = await ref.current!.getCroppedBlob('image/jpeg', 0.9);
    // ...upload blob
  };

  return (
    <>
      <ImageCropper
        ref={ref}
        src={src}
        aspect={1}
        height={320}
        onArcCropChange={(e) => console.log(e.detail)}
      />
      <button onClick={save}>Save avatar</button>
    </>
  );
}

<script setup>
import { ref } from 'vue';
import { ImageCropper } from '@arclux/arc-ui-vue';

const cropper = ref(null);

async function save() {
  const blob = await cropper.value?.getCroppedBlob('image/jpeg', 0.9);
  // ...upload blob
}
</script>

<template>
  <ImageCropper
    ref="cropper"
    src="/uploads/avatar-original.jpg"
    :aspect="1"
    :height="320"
    @arc-crop-change="(e) => console.log(e.detail)"
  />
  <button @click="save">Save avatar</button>
</template>

<script>
  import { ImageCropper } from '@arclux/arc-ui-svelte';

  let cropper;

  async function save() {
    const blob = await cropper.getCroppedBlob('image/jpeg', 0.9);
    // ...upload blob
  }
</script>

<ImageCropper
  bind:this={cropper}
  src="/uploads/avatar-original.jpg"
  aspect={1}
  height={320}
  on:arc-crop-change={(e) => console.log(e.detail)}
/>
<button on:click={save}>Save avatar</button>

import { Component, ElementRef, ViewChild } from '@angular/core';
import { ImageCropper } from '@arclux/arc-ui-angular';

@Component({
  imports: [ImageCropper],
  template: `
    <arc-image-cropper
      #cropper
      src="/uploads/avatar-original.jpg"
      [aspect]="1"
      [height]="320"
      (arcCropChange)="onCropChange($event)"
    ></arc-image-cropper>
    <button (click)="save()">Save avatar</button>
  `,
})
export class AvatarEditorComponent {
  @ViewChild('cropper', { read: ElementRef }) cropper!: ElementRef;

  onCropChange(e: CustomEvent) {
    console.log(e.detail);
  }

  async save() {
    const blob = await this.cropper.nativeElement.getCroppedBlob('image/jpeg', 0.9);
    // ...upload blob
  }
}