Cropping GIFs

[innocenzi]

Loading GIFs into the cropper doesn't seem to be an issue, but I am having trouble getting the cropped results for each frame.

Calling getResult().canvas on the cropper seems to always render the first frame of the GIF. My idea was to make vue-advanced-cropper render each cropped frame of the GIF (I don't know how yet), and make gif.js (an old library for making GIFs) do the work of putting the frames together.

Do you have any idea how I could proceed?

[Norserium]

@innocenzi, hello!

You have at least the coordinates (coordinates), the image transforms (imageTransforms) and the image itself. You just need to find the way how to crop GIF using this information.

There is, for example, the gif cropper. Perhaps you can pick up some ideas.

It's unlikely, that this functionality will be implemented natively, because it will significantly increase the bundle size.

[innocenzi]

Thanks, those are useful information. I was initially thinking to get support for getting specific frames from vue-advanced-cropper, but it doesn't really make sense actually.

I'll go with the coordinates and transforms and find a way to do so. Thanks again!

[Jchou24]

Hi, thnks for the above discusssion.

I implement a similar function to crop gif by "super-image-cropper". (https://github.com/STDSuperman/super-image-cropper) hop this will be useful.

import { CropperResult } from 'vue-advanced-cropper';
import { IGifOpts, SuperImageCropper } from 'super-image-cropper';

/**
 * Mainly used to cut gif, but can also cut other images
 * @param image
 * @param cropperResult
 * @param background
 * @param gifJsOptions
 * @returns
 */
const CropCropperResult = async (
    image: string,
    cropperResult: CropperResult,
    background?: string,
    gifJsOptions?: IGifOpts
) => {
    const coordinates = cropperResult.coordinates;
    const transforms = cropperResult.image.transforms;
    const imageCropper = new SuperImageCropper();

    return await (imageCropper.crop({
        src: image,
        cropperJsOpts: {
            x: coordinates.left * -1,
            y: coordinates.top * -1,
            width: coordinates.width,
            height: coordinates.height,
            rotate: transforms.rotate,
            scaleX: transforms.flip.horizontal ? -1 : 1,
            scaleY: transforms.flip.vertical ? -1 : 1,
            background,
        },
        outputType: 'blob',
        gifJsOptions,
    }) as Promise<Blob>);
};