trim-image-data
💇♀️ Function for trimming/cropping transparent pixels surrounding an image. Very similar to trim-canvas, but accepts and returns an ImageData-instance instead. Also allows specifying custom colors to trim.
Demo
https://trim-image-data.netlify.app
Usage
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
# 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 instance to crop -
cropOptions
- optional, an object specifying the amount of pixels to crop from each side-
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.