transforming animated GIFs

[adam-prchlik]

transforming animated GIFs

[adam-prchlik]

Hi, Rik
I tried that before, without success ... but i've managed to make it work with vue-filepond by passing the filter function like Prop 👍

for future reference to other Vue-grammers i will show pseudo code of the whole setup

<template>
        <file-pond
            :imageEditEditor="doka"
            :server="filepondServerOptions"
            :imageTransformImageFilter="filterTransform"
            .............
        />
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

// Import Doka
import { create as CreateDoka } from "@root/ClientApp/libraries/doka/lib/doka.esm.min";
import "@root/ClientApp/libraries/doka/lib/doka.min.css";

// Filepond
import vueFilePond from "vue-filepond";
import "filepond/dist/filepond.min.css";
import { FilePond } from "filepond";

import FilePondPluginImageTransform from "filepond-plugin-image-transform";
// ... import other plugins ....


// instance of filepond that we will use
const filepondInst: any = vueFilePond(
    FilePondPluginImageTransform,
   // other plugins goes here   
);

@Component({
    components: {
        "file-pond": filepondInst
    }
})
export default class FileUpload extends Vue {

    doka: any = null;

    filepondServerOptions: any = {
        url: <some url here>
        process: {
            ondata: this.uploadEnhance
        }        
    };

    dokaOptions: any = {
        // lot of doka options
    };

    created(): void {
        this.doka = CreateDoka();
        this.doka.setOptions(this.dokaOptions);
    }

    filterTransform(file): Promise<boolean> {
        // no gif mimetype, do transform
        if (!/image\/gif/.test(file.type)) {
            return Promise.resolve(true);
        }

        let p = new Promise<boolean>(resolve => {
            const reader = new FileReader();
            reader.onload = e => {
                let res = this.isGif(reader.result as ArrayBuffer);
                resolve(res);
            };
            reader.readAsArrayBuffer(file);
        });
        return p;
    }

    isGif(data: ArrayBuffer): boolean {
        // some magic here
    }
}

</script>

Thanks for help

[rikschennink]

Hi, you can use the filter method like this, you need to either ignore all GIFs, so check extension, or you need to inspect the actual file data to determine if it's an animated GIF.

imageTransformImageFilter: file =>
    new Promise((resolve, reject) => {
      console.log(file); // file object
      resolve(true) // true if should transform, false if should leave alone
    })

[rikschennink]

Thanks for posting the Vue snippet 🙏