https://github.com/duniul/crop-image-data
✂️ Function for cropping an image through its ImageData.
https://github.com/duniul/crop-image-data
canvas crop-image image image-data image-editing
Last synced: 11 months ago
JSON representation
✂️ Function for cropping an image through its ImageData.
- Host: GitHub
- URL: https://github.com/duniul/crop-image-data
- Owner: duniul
- License: isc
- Created: 2020-08-30T15:44:29.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-02-19T10:29:30.000Z (over 2 years ago)
- Last Synced: 2025-06-15T23:05:59.674Z (about 1 year ago)
- Topics: canvas, crop-image, image, image-data, image-editing
- Language: TypeScript
- Homepage: https://crop-image-data.netlify.app
- Size: 562 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# crop-image-data
[](https://www.npmjs.com/package/crop-image-data)
[](https://bundlephobia.com/result?p=crop-image-data)
✂️ Function for cropping an image through its [ImageData].
## Demo
https://crop-image-data.netlify.app
## Installation
```sh
# npm
npm install crop-image-data
# pnpm
pnpm install crop-image-data
# yarn
yarn add crop-image-data
```
## Usage
### `cropImageData(imageData, cropOptions)`
Creates a cropped version of an ImageData-instance. Does not mutate the recieved instance.
**Parameters:**
- `imageData` - the ImageData-instance instance to crop
- `cropOptions` - an object specifying the amount of pixels to crop from each side
- `top` - number of pixels to crop from the top
- `right` - number of pixels to crop from the right side
- `bottom` - number of pixels to crop from the bottom
- `left` - number of pixels to crop from the left side
**Return value:**
A new, cropped ImageData-instance.
**Examples:**
```js
import cropImageData from 'crop-image-data';
// crop 5 pixels on every side
const cropped = cropImageData(imageData, { top: 5, right: 5, bottom: 5, left: 5 });
// crop 50 pixels from the top
const croppedTop = cropImageData(imageData, { top: 50 });
// crop 10 pixels on each side
const croppedSides = cropImageData(imageData, { left: 10, right: 10 });
```
## Related packages
- [trim-image-data] - finds and trims whitespace (or a specified color) from an image using
`crop-image-data`
[imagedata]: https://developer.mozilla.org/en-US/docs/Web/API/ImageData
[trim-image-data]: https://github.com/duniul/trim-image-data