solid-easy-crop v0.0.0

solid-easy-crop

A Solid component to crop images/videos with easy interactions

Features

• Supports drag, zoom and rotate interactions
• Provides crop dimensions as pixels and percentages
• Supports any images format (JPEG, PNG, even GIF) as url or base 64 string
• Supports any videos format supported in HTML5
• Mobile friendly

Quick start

Install it:

npm i solid-easy-crop
# or
yarn add solid-easy-crop
# or
pnpm add solid-easy-crop

Basic usage

The Cropper is styled with position: absolute to take the full space of its parent. Thus, you need to wrap it with an element that uses position: relative or the Cropper will fill the whole page.

import Cropper from 'solid-easy-crop'

const Demo = () => {
  const [crop, setCrop] = createSignal({ x: 0, y: 0 })
  const [zoom, setZoom] = createSignal(1)

  const onCropComplete = (croppedArea, croppedAreaPixels) => {
    console.log(croppedArea, croppedAreaPixels)
  }

  return (
    <Cropper
      image={yourImage}
      crop={crop()}
      zoom={zoom()}
      aspect={4 / 3}
      onCropChange={setCrop}
      onCropComplete={onCropComplete}
      onZoomChange={setZoom}
    />
  )
}

Styles

This component requires some styles to be available in the document. By default, you don't need to do anything, the component will automatically inject the required styles in the document head. If you want to disable this behaviour and manually inject the CSS, you can set the disableAutomaticStylesInjection prop to true and use the file available in the package: solid-easy-crop/solid-easy-crop.css.

Props

License

MIT