Creating headshots for all employee photos made easy

A developer can easily create a workflow using the tweekit web application to crop the headshots for all HR employee photos from any format uploaded, making it easy to get the content you need, with no hassles from your employees.

Before starting, always include the tweekit_bundle.js

Rest Version
Widget Version

rest_api_example.js


    const fetch = require('node-fetch');
    const fs = require('fs');

    const headers = {
        "apikey": "{Example Key}",
        "apisecret": "{Example Secret}",
        "Content-Type": "application/json;charset=UTF-8"
    };

    const baseUrl = 'https://www.tweekit.io/tweekit/api'

    async function resize({ docID, width, height }) {


        const format = 'png'

        const fetchUrl = `${baseUrl}/image/${docID}`;

        const options ={
            headers ,
            method: 'POST',
            body: JSON.stringify({
                height,
                width,
                fmt: format
            })
        };

        const response = await fetch(fetchUrl,options);
        response.body.pipe(fs.createWriteStream(`${Date.now()}-test.${format}`));
    }

    async function upload({ avatar, filename }) {
        formData.append("name", filename);
        formData.append("file", fs.createReadStream(avatar));

        const fetchUrl = `${baseUrl}/image/upload`;

        const response = await fetch(fetchUrl, opts);
        const docID = response.headers.get('x-tweekit-docid')

        return { docID, response }
    }

    function storeEmployeePhotosToDB(employeeObj) {
        const { avatar, name, id } = employeeObj

        const filename = `${id}_${name.replace("", "_").toLowerCase()}.png`

        const { docID } = await upload({ avatar, filename })
        resize({ docID, width: 300 , height: 300 })
    }

    async function main() {
        const employeeList = await fetch('sample_employee_url'. {
            method: 'GET'
        })

        employeeList.map((employee) => {
            storeEmployeePhotosToDB(employee)
        })

    }

index.html `<html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>Employee Photos Flow</title> </head> <body>  <div id="canvas0"></div> <script src="tweekit-widget.min.js"></script> <script src="script.js"></script> </body> </html>`

script.js


    async function createAvatar(userObj) {
        const avatarSize = 320

        // avatarImg is a blob
        const { avatarImgUrl } = userObj

        const imgFile = new File(avatarImgUrl)

        const tweekit = new Tweekit("#canvas0", {
            appId: "{ your app ID }"
        })

        // upload image to server
        tweekit.upload(imgFile)

        //Set the crop tool to be elliptical
        widget.elliptical = true;

        //Set the Width of the crop result
        widget.resultWidth = avatarSize;

        //Set the Height of the crop result
        widget.resultHeight = avatarSize;

        //Set the output format for the crop result
        widget.format = "png";

        //Set Alpha channel to true - for trasparent backgrounds
        widget.alpha = true;

        const croppedImgFile = await tweekit.result()

        return  URL.createObjectURL(croppedImgFile)
    }