Crop GIF / PNG / JPG / JPEG images using Javascript.
- Support for GIF cropping.
- Support for collaboration with cropperjs.
- Support for PNG / JPG / JPEG cropping.
-
CodeSandbox: Use with cropperjs.
npm i super-image-cropper -S
or
yarn add super-image-cropper -S
Recommend for use with cropperjs.
-
src
: image url. -
crossOrigin
: set image crossOrigin strategy. -
cropperInstance
: cropperjs instance. -
cropperJsOpts
:-
x
: the offset left of the cropped area. -
y
: the offset top of the cropped area. -
width
: the width of the cropped area -
height
: the height of the cropped area. -
rotate
: the rotated degrees of the image. -
scaleX
: the scaling factor to apply on the abscissa of the image. -
scaleY
: the scaling factor to apply on the ordinate of the image. -
background
: GIF background color.
-
-
gifJsOptions
: gif.js options. -
outputType
: Set output type.-
base64
: Output base64. -
blob
: Output blob object. -
blobURL
: Output blob url. (e.g:blob:http://localhost:3000/8a583ca5-e87c-4750-93b0-da05f69b702a
)
-
<img id="cropperJsRoot" src="xxx.gif"></img>
import { SuperImageCropper } from 'super-image-cropper';
import Cropper from 'cropperjs';
const image = document.getElementById('image') as HTMLImageElement;
const cropperInstance = new Cropper(image, {
aspectRatio: 16 / 9,
autoCrop: false,
autoCropArea: 1,
minCropBoxHeight: 10,
minCropBoxWidth: 10,
viewMode: 1,
initialAspectRatio: 1,
responsive: false,
guides: true
});
const imageCropper = new SuperImageCropper();
imageCropper.crop({
cropperInstance: cropperInstance,
src: 'xxx.gif',
outputType: 'blobURL' // optional, default blob url
}).then(blobUrl => {
const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);
});
If not used with cropperjs, the src parameter must be passed.
import { SuperImageCropper } from 'super-image-cropper';
const imageCropper = new SuperImageCropper();
imageCropper.crop({
src: gifUrl,
cropperJsOpts: {
width: 400,
height: 240,
rotate: 45,
y: 0,
x: 0,
}
}).then(blobUrl => {
const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);
});
- Used with react-cropper or cropperjs in react: React App.