A Svelte component to crop images with easy interactions
This is a rewrite of
- Supports drag and zoom interactions
- Provides crop dimensions as pixels and percentages
- Supports any images format (JPEG, PNG, even GIF) as url or base 64 string
- Mobile friendly
yarn add svelte-easy-crop
npm install svelte-easy-crop --save
The Cropper is styled with
position: absoluteto take the full space of its parent. Thus, you need to wrap it with an element that uses
position: relativeor the Cropper will fill the whole page.
<script>import Cropper from 'svelte-easy-crop'let image = '/images/dog.jpeg'let crop = x: 0 y: 0let zoom = 1</script><Cropper=/>
||string||✓||The image to be cropped.|
||✓||Position of the image.
||number||Zoom of the image between
||number||Aspect of the cropper. The value is the ratio between its width and its height. The default value is
||number||Minimum zoom of the image. Defaults to 1.|
||number||Maximum zoom of the image. Defaults to 3.|
||'rect' | 'round'||Shape of the crop area. Defaults to 'rect'.|
||Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the
||boolean||Whether to show or not the grid (third-lines). Defaults to
||number||Multiplies the value by which the zoom changes. Defaults to 1.|
||string||Allows setting the crossOrigin attribute on the image.|
||boolean||Whether the position of the image should be restricted to the boundaries of the cropper. Useful setting in case of
This event is the one you should use to save the cropped area of the image. The
detail property is an object with 2 values:
percent: coordinates and dimensions of the cropped area in percentage of the image dimension
pixels: coordinates and dimensions of the cropped area in pixels.
Both arguments have the following shape:
const area =x: number // x/y are the coordinates of the top/left corner of the cropped areay: numberwidth: number // width of the cropped areaheight: number // height of the cropped area
http://localhost:5000 and start hacking!