npmpackage.info

Gathering detailed insights and metrics for svelte-easy-crop

Other packages similar to svelte-easy-crop

react-easy-crop

5.1.0

A React component to crop images/videos with easy interactions

@jimp/plugin-crop

1.6.0

react-image-crop

11.0.7

A responsive image cropping tool for React

svelte-preprocess

6.0.3

A Svelte preprocessor wrapper with baked-in support for commonly used preprocessors

Gathering detailed insights and metrics for svelte-easy-crop

svelte-easy-crop

A Svelte component to crop images with easy interactions

3.0.1

198

MIT

TypeScript

296,620 3

Installations

npm install svelte-easy-crop

Pull Requests

Open

1

Total

35

Closed

13

Merged

21

Issues

Open

6

Total

23

Closed

17

Releases

v3.0.1

Published on 25 Oct 2024

v3.0.0

Published on 19 Jun 2024

v2.0.4

Published on 19 Jun 2024

v2.0.3

Published on 15 Jan 2024

2.0.1

v2.0.1

Published on 27 Jan 2023

v2.0.0

Published on 26 Jan 2023

View all 14 releases

Developer

ValentinH

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

Yes

Node Version

20.11.1

NPM Version

10.2.4 Statistics

198 Stars

64 Commits

31 Forks

5 Watching

2 Branches

9 Contributors

Updated on 19 Nov 2024

Languages

TypeScript (36.98%)

JavaScript (31.38%)

Svelte (30.76%)

HTML (0.88%)

Total Downloads

Cumulative downloads

Total Downloads

296,620

Last day

36.1%

904

Compared to previous day

Last week

-42.5%

3,875

Compared to previous week

Last month

46.8%

18,993

Compared to previous month

Last year

67%

142,607

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

svelte-easy-crop

A Svelte component to crop images with easy interactions

This is a rewrite of react-easy-crop (https://github.com/valentinh/react-easy-crop).

gzip size

svelte-easy-crop Demo

Demo

Basic example

Features

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

Installation

1yarn add svelte-easy-crop

1npm install svelte-easy-crop --save

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.

1<script>
2  import Cropper from 'svelte-easy-crop'
3
4  let image = '/images/dog.jpeg'
5  let crop = { x: 0, y: 0 }
6  let zoom = 1
7</script>
8
9<Cropper
10 {image}
11 bind:crop
12 bind:zoom
13 on:cropcomplete={e => console.log(e.detail)}
14/>

Props

Prop	Type	Required	Description
`image`	string	✓	The image to be cropped.
`crop`	`{ x: number, y: number }`	✓	Position of the image. `{ x: 0, y: 0 }` will center the image under the cropper.
`zoom`	number		Zoom of the image between `minZoom` and `maxZoom`. Defaults to 1.
`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 image. Defaults to 1.
`maxZoom`	number		Maximum zoom of the image. Defaults to 3.
`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 image size.
`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.
`crossOrigin`	string		Allows setting the crossOrigin attribute on the image.
`restrictPosition`	boolean		Whether the position of the image should be restricted to the boundaries of the cropper. Useful setting in case of `zoom < 1` or if the cropper should preserve all image content while forcing a specific aspect ratio for image throughout the application. Example: https://codesandbox.io/s/1rmqky233q.

Events

on:cropcomplete

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:

1const area = {
2  x: number, // x/y are the coordinates of the top/left corner of the cropped area
3  y: number,
4  width: number, // width of the cropped area
5  height: number, // height of the cropped area
6}

Development

1yarn
2yarn dev

Now, open http://localhost:5000 and start hacking!

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Maintained

Determines if the project is "actively maintained".

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to svelte-easy-crop

Other packages similar to svelte-easy-crop

svelte-easy-crop

Installations

Pull Requests

1

35

13

21

Issues

6

23

17

Releases

Developer

Developer Guide

ESM

Yes

20.11.1

10.2.4

Statistics

Languages

Total Downloads

296,620

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

svelte-easy-crop

Demo

Features

Installation

Basic usage

Props

Events

on:cropcomplete

Development

License

10

10

10

3

2

0

0

0

0

0

0

0

0

3

/10