https://github.com/duniul/trim-image-data
💇♀️ Function for trimming/cropping surround pixels in an ImageData-instance.
https://github.com/duniul/trim-image-data
canvas crop-image image image-data image-editing trim-image
Last synced: 11 months ago
JSON representation
💇♀️ Function for trimming/cropping surround pixels in an ImageData-instance.
- Host: GitHub
- URL: https://github.com/duniul/trim-image-data
- Owner: duniul
- License: isc
- Created: 2020-08-30T13:46:32.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-02-21T12:52:23.000Z (over 2 years ago)
- Last Synced: 2025-06-07T06:02:54.661Z (about 1 year ago)
- Topics: canvas, crop-image, image, image-data, image-editing, trim-image
- Language: TypeScript
- Homepage: https://trim-image-data.netlify.app
- Size: 561 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# trim-image-data
[](https://www.npmjs.com/package/trim-image-data)
[](https://bundlephobia.com/result?p=trim-image-data)
💇♀️ Function for trimming/cropping transparent pixels surrounding an image. Very similar to
[trim-canvas], but accepts and returns an [ImageData][image-data]-instance instead. Also allows
specifying custom colors to trim.
## Demo
https://trim-image-data.netlify.app
## Usage
```js
import trimImageData from 'trim-image-data';
// trim surrounding fully transparent pixels
const trimmedTransparent = trimImageData(imageData);
// trim surrounding white pixels
const trimmedWhite = trimImageData(imageData, {
trimColor: ([red, green, blue, alpha]) => {
return red === 255 && green === 255 && blue === 255 && alpha === 255;
};
});
// supports passing a RGBA array instead of a callback too
const trimmedWhite = trimImageData(imageData, {
trimColor: [255, 255, 255, 255]
});
// trim any pixel with max alpha
const trimmedDim = trimImageData(imageData, {
trimColor: ([alpha]) => alpha === 255
});
```
## Installation
```sh
# npm
npm install trim-image-data
# yarn
yarn add trim-image-data
# pnpm
pnpm add trim-image-data
```
## API
### `trimImageData(imageData, trimOptions)`
Creates a trimmed version of an ImageData-instance. Trims fully transparent pixels by default. Does
not mutate the recieved instance.
**Parameters:**
- `imageData` - the ImageData-instance to crop
- `trimOptions` - optional
- `trimColor([red, green, blue, alpha]) => boolean` | `trimColor: [r, g, b, a]`
Callback function used to determine if a value should be trimmed or not. Receives an object of
RGBA channels and should return a boolean.
Also accepts a single RGBA-array as a shorthand for a callback that returns `true` if all
channels are equal to the corresponding channel in the array.
**Return value:**
A new, trimmed ImageData-instance.
### `getTrimEdges(imageData, trimOptions)`
Calculates the number of pixels to trim from each side of an image, provided as an ImageData object.
Does not actually trim the image.
Uses the same options and defaults as `trimImageData`.
**Parameters:**
- `imageData` - the ImageData-instance to calculate the trim for
- `trimOptions` - optional
- `trimColor([red, green, blue, alpha]) => boolean` | `trimColor: [r, g, b, a]`
Callback function used to determine if a value should be trimmed or not. Receives an object of
RGBA channels and should return a boolean.
Also accepts a single RGBA-array as a shorthand for a callback that returns `true` if all
channels are equal to the corresponding channel in the array.
**Return value:**
A new, trimmed ImageData-instance.
## Related packages
- [crop-image-data] - crops ImageData by specified number of pixels. Used as a dependency in
`trim-image-data`.
## Credits
A lot of the code in this repo is based on [trim-canvas], I just had a need for the same
functionality without passing a canvas.
[trim-canvas]: https://github.com/agilgur5/trim-canvas
[image-data]: https://developer.mozilla.org/en-US/docs/Web/API/ImageData
[crop-image-data]: https://github.com/duniul/crop-image-data