Svelte Easy Crop screenshot

Svelte Easy Crop

Author Avatar Theme by Valentinh
Updated: 19 Mar 2025
221 Stars

A Svelte component to crop images with easy interactions

Categories

Overview:

The svelte-easy-crop is a Svelte component that allows users to easily crop images with interactive features. It is a rewrite of the react-easy-crop component and is available under the MIT License. This component supports drag and zoom interactions, provides crop dimensions in both pixels and percentages, and can handle images in various formats such as JPEG, PNG, and GIF.

Features:

  • Drag and zoom interactions
  • Crop dimensions in pixels and percentages
  • Supports various image formats (JPEG, PNG, GIF)
  • Mobile friendly

Installation:

To install svelte-easy-crop, you can follow these steps:

  1. Add the package to your project using your package manager of choice (e.g., npm or yarn):
npm install svelte-easy-crop
  1. Import the component in your Svelte file:
import Cropper from 'svelte-easy-crop';
  1. Use the component in your Svelte template:
<Cropper {image} {crop} {zoom} {aspect} {minZoom} on:cropComplete={handleCrop} />

Make sure to replace {image}, {crop}, {zoom}, {aspect}, {minZoom}, and handleCrop with your desired values and function.

Summary:

The svelte-easy-crop component is a useful tool for cropping images with ease. It provides drag and zoom interactions, supports various image formats, and is mobile-friendly. With its straightforward installation process and customizable props, it can be seamlessly integrated into Svelte projects.