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

Prop	Type	Required	Description
image	string		The image to be cropped. image or video is required.
video	string or Array<{ src: string; type?: string }>		The video to be cropped. image or video is required.
crop	{ x: number, y: number }	✓	Position of the media. { x: 0, y: 0 } will center the media under the cropper.
zoom	number		Zoom of the media between minZoom and maxZoom. Defaults to 1.
rotation	number (in degrees)		Rotation of the media. Defaults to 0.
aspect	number		Aspect of the cropper. The value is the ratio between its width and its height. The default value is 4/3
minZoom	number		Minimum zoom of the media. Defaults to 1.
maxZoom	number		Maximum zoom of the media. Defaults to 3.
zoomWithScroll	boolean		Enable zoom by scrolling. Defaults to true
cropShape	'rect' | 'round'		Shape of the crop area. Defaults to 'rect'.
cropSize	{ width: number, height: number }		Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the aspect prop and the media size. You should probably not use this option and should rely on aspect instead. See https://github.com/ValentinH/react-easy-crop/issues/186.
showGrid	boolean		Whether to show or not the grid (third-lines). Defaults to true.
zoomSpeed	number		Multiplies the value by which the zoom changes. Defaults to 1.
objectFit demo	'contain', 'horizontal-cover', 'vertical-cover' or 'auto-cover'		Specifies how the image is shown in the cropper:. contain: the image will be adjusted to be fully visible, horizontal-cover: the image will horizontally fill the cropper, vertical-cover: the image will vertically fill the cropper, auto-cover: we automatically pick between horizontal-cover or vertical-cover based on the dimensions of the image. Defaults to "contain".
onCropChange	crop => void	✓	Called every time the crop is changed. Use it to update your crop state.
onZoomChange	zoom => void		Called every time the zoom is changed. Use it to update your zoom state.
onRotationChange	rotation => void		Called every time the rotation is changed (with mobile or multi-fingers gestures). Use it to update your rotation state.
onCropSizeChange	cropSize => void		Called when a change in either the cropSize width or the cropSize height occurs.
onCropComplete	Function		Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in percentages and pixels (rounded to the nearest integer)
onCropAreaChange	Function		Very similar to onCropComplete but is triggered for every user interaction instead of waiting for the user to stop.
transform	string		CSS transform to apply to the image in the editor. Defaults to translate(${crop.x}px, ${crop.y}px) rotate(${rotation}deg) scale(${zoom}) with variables being pulled from props.
style	{ containerStyle: object, mediaStyle: object, cropAreaStyle: object }		Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults.
classes	{ containerClassName: string, mediaClassName: string, cropAreaClassName: string }		Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. If you have CSS specificity issues, you should probably use the disableAutomaticStylesInjection prop.
mediaProps	object		The properties you want to apply to the media tag ( or depending on your media)
restrictPosition	boolean		Whether the position of the media should be restricted to the boundaries of the cropper. Useful setting in case of zoom < 1 or if the cropper should preserve all media content while forcing a specific aspect ratio for media throughout the application. Example: https://codesandbox.io/s/1rmqky233q.
initialCroppedAreaPercentages	{ width: number, height: number, x: number, y: number}		Use this to set the initial crop position/zoom of the cropper (for example, when editing a previously cropped media). The value should be the same as the croppedArea passed to onCropComplete. This is the preferred way of restoring the previously set crop because croppedAreaPixels is rounded, and when used for restoration, may result in a slight drifting crop/zoom
initialCroppedAreaPixels	{ width: number, height: number, x: number, y: number}		Use this to set the initial crop position/zoom of the cropper (for example, when editing a previously cropped media). The value should be the same as the croppedAreaPixels passed to onCropComplete Example: https://codesandbox.io/s/pmj19vp2yx.
onInteractionStart	Function		Called every time a user starts a wheel, touch or mousedown event.
onInteractionEnd	Function		Called every time a user ends a wheel, touch or mousedown event.
onMediaLoaded	Function		Called when media gets loaded. Gets passed an mediaSize object like { width, height, naturalWidth, naturalHeight }
onTouchRequest	(e: React.TouchEvent<HTMLDivElement>) => boolean		Can be used to cancel a touch request by returning false.
onWheelRequest	(e: WheelEvent) => boolean		Can be used to cancel a zoom with wheel request by returning false.
disableAutomaticStylesInjection	boolean		Whether to auto inject styles using a style tag in the document head on component mount. When disabled you need to import the css file into your application manually (style file is available in react-easy-crop/react-easy-crop.css). Example with sass/scss @import "~react-easy-crop/react-easy-crop";.
setImageRef	(ref: React.RefObject<HTMLImageElement>) => void		Called when the component mounts, if present. Used to set the value of the image ref object in the parent component.
setVideoRef	(ref: React.RefObject<HTMLVideoElement>) => void		Called when the component mounts, if present. Used to set the value of the video ref object in the parent component.
setMediaSize	(size: MediaSize) => void		[Advanced Usage] Used to expose the mediaSize value for use with the getInitialCropFromCroppedAreaPixels and getInitialCropFromCroppedAreaPercentages functions. See this CodeSandbox instance for a simple example.
setCropSize	(size: Size) => void		[Advanced Usage] Used to expose the cropSize value for use with the getInitialCropFromCroppedAreaPixels and getInitialCropFromCroppedAreaPercentages functions. See this CodeSandbox instance for a simple example.
nonce	string		The nonce to add to the style tag when the styles are auto injected.

License

MIT