PHPackages                             tobento/js-cropper - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. tobento/js-cropper

ActiveLibrary[Image & Media](/categories/media)

tobento/js-cropper
==================

Simple Image Cropper.

1.0.1(1y ago)0361MITJavaScript

Since Nov 5Pushed 1y ago1 watchersCompare

[ Source](https://github.com/tobento-ch/js-cropper)[ Packagist](https://packagist.org/packages/tobento/js-cropper)[ Docs](https://www.tobento.ch)[ RSS](/packages/tobento-js-cropper/feed)WikiDiscussions 1.x Synced today

READMEChangelog (2)DependenciesVersions (3)Used By (1)

JS Cropper
==========

[](#js-cropper)

Simple JavaScript Image Cropper.

You may visit the [**docs.tobento.ch/js-cropper**](https://docs.tobento.ch/js-cropper) page for demo.

Table of Contents
-----------------

[](#table-of-contents)

- [Getting started](#getting-started)
    - [Browser support](#browser-support)
- [Documentation](#documentation)
    - [Basic Usage](#basic-usage)
    - [Options](#options)
    - [Methods](#methods)
    - [Events](#events)
    - [Translations](#translations)
- [Credits](#credits)

---

Getting started
===============

[](#getting-started)

Browser support
---------------

[](#browser-support)

Modern browser only.

Documentation
=============

[](#documentation)

Basic Usage
-----------

[](#basic-usage)

**1. Include CSS/JS**

```

```

**2. Register**

Use the `data-crop` attribute to automatically register the images.

```

```

Thats all.

**You may get the crop data**

```

    import cropper from "cropper.js";

    document.addEventListener('DOMContentLoaded', (e) => {
        const cropData = cropper.get('image1').data();

        // or using the stopped event
        cropper.get('image1').listen('stopped', (e, crop) => {
            const cropData = crop.data();
        });
    });

```

**Manually creating**

Instead of using the `data-crop` attribute to register the crop automatically, you can create the crop manually by using the `create` function:

```

    import cropper from "cropper.js";

    document.addEventListener('DOMContentLoaded', (e) => {
        // create it manually:
        const crop = cropper.create(document.querySelector('#image'), {
            id: 'foo',
            target: [1200, 600],
            crop: {
                x: 100,
                y: 200,
                width: 900,
                height: 450,
                scale: 1
            },
            keep_ratio: true
        });

        // you may get the crop data using the stopped event:
        crop.listen('stopped', (event, crop) => {
            const cropData = crop.data();
        });
    });

```

Options
-------

[](#options)

```

```

OptionValueDescription`"id"``"ID"`A unique id.`"target"``[1200, 600]`, `[1200]` or `[null, 600]`A target image width and/or height. (optional)`"crop"``null`Crop data. (optional)`"keep_ratio"``true` or `false`If to keep the image ratio. (optional)`"scalable"``true` or `false`If to scale image using. (optional)### Methods

[](#methods)

```

    import cropper from "cropper.js";

    document.addEventListener('DOMContentLoaded', (e) => {
        // create a crop object:
        const crop = cropper.create(document.querySelector('#image'), {
            id: 'ID',
            target: [1200, 600],
            crop: {
                x: 100,
                y: 200,
                width: 900,
                height: 450,
                scale: 1
            },
            keep_ratio: true
        });

        // you may get a crop object by id:
        const crop = cropper.get('ID');

        // you may check if a crop object exists:
        if (cropper.has('ID')) {
            cropper.get('ID');
        }

        // you may get the crop data:
        const cropData = crop.data();

        // you may destroy the crop:
        crop.destroy();
    });

```

### Events

[](#events)

EventDescription`started`This event is fired **after** the crop area is started being moved.`stopped`This event is fired **after** the crop area is stopped being moved.`moving`This event is fired **while** moving the crop area.```
cropper.get('ID').listen('stopped', (event, crop) => {
    const cropData = crop.data();
});
```

Translations
------------

[](#translations)

```

    import cropper from "cropper.js";

    const translator = cropper.translator;

    // specify the current locale:
    translator.locale('de-CH');
    // or translator.locale(document.querySelector('html').getAttribute('lang'));
    //translator.localeFallbacks({"de-CH": "en"});

    // add translations:
    translator.add('de-CH', {
        "Cannot keep the minimal crop data set for the area.": "Das minimale Crop-Area kann nicht beibehalten werden.",
        "Could not detect the image width and height!": "Die Bildbreite und -höhe konnte nicht ermittelt werden!",
        "Invalid target data set, cannot keep ratio!": "Ungültige Zieldimension, Verhältnis kann nicht eingehalten werden!",
        "The image is too small and thereby the image quality may suffer!": "Das Bild ist zu klein und dadurch kann die Bildqualität leiden!",
        "The image quality may suffer as the crop area is too small!": "Die Bildqualität kann leiden, da der Zuschneidebereich zu klein ist!"
    });

```

Credits
=======

[](#credits)

- [Tobias Strub](https://www.tobento.ch)
- [All Contributors](../../contributors)

###  Health Score

25

—

LowBetter than 35% of packages

Maintenance37

Infrequent updates — may be unmaintained

Popularity9

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity40

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~16 days

Total

3

Last Release

574d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/055d6a1b5c2384bb179c75ab0b55914231d898fdc4dffeb30770f81200e52206?d=identicon)[TOBENTOch](/maintainers/TOBENTOch)

---

Top Contributors

[![tobento-ch](https://avatars.githubusercontent.com/u/16684832?v=4)](https://github.com/tobento-ch "tobento-ch (3 commits)")

---

Tags

imagetobentocropper

### Embed Badge

![Health badge](/badges/tobento-js-cropper/health.svg)

```
[![Health](https://phpackages.com/badges/tobento-js-cropper/health.svg)](https://phpackages.com/packages/tobento-js-cropper)
```

###  Alternatives

[intervention/image

PHP Image Processing

14.3k208.9M2.6k](/packages/intervention-image)[league/glide

Wonderfully easy on-demand image manipulation library with an HTTP based API.

2.6k53.3M146](/packages/league-glide)[liip/imagine-bundle

This bundle provides an image manipulation abstraction toolkit for Symfony-based projects.

1.7k40.0M248](/packages/liip-imagine-bundle)[spatie/image

Manipulate images with an expressive API

1.4k60.7M189](/packages/spatie-image)[intervention/image-laravel

Laravel Integration of Intervention Image

1588.9M183](/packages/intervention-image-laravel)[intervention/gif

PHP GIF Encoder/Decoder

6128.3M15](/packages/intervention-gif)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)