Image resizing tool for your e-commerce or social media website

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 headers = {
        "apikey": "{Example Key}",
        "apisecret": "{Example Secret}",
        "Content-Type": "application/json;charset=UTF-8"
    };

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

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

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

        return { docID, response }
    }

    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);
        return response.body;
    }

    async function resizeImg({ imgUrl, width, height, filename}) {

        const imgFile = new File(imgUrl)


        // upload image to server
        const { docID } = await upload({ file: imgFile, filename })
        const imgBlob = await resize({
            docID,
            width: parseInt(width),
            height:  parseInt(height)
        })
        const newImgUrl = URL.createObjectURL(imgBlob)

        return newImgUrl
    }

    $(document).ready(function() {
        $('.lazyImg').each(async function() {
            const {
                imgUrl,
                width ,
                height ,
                filename
            } = $(this).data()

            const croppedImgUrl = await resizeImg({imgUrl,width, height, filename})

            $(this).attr('src', croppedImgUrl)
        })
    })

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>Resizing Image for e-commerce</title> </head> <body> <img data-src="somesample.jpg" data-width="200" data-height="400" /> <img data-src="somesample.jpg" data-width="400" data-height="800" /> <img data-src="somesample.jpg" data-width="300" data-height="400" /> <div id="canvas0"></div> <script src="jquery.js"></script> <script src="tweekit-widget.min.js"></script> </body> </html>

script.js


    async function resizeImg(imgUrl, width, height) {

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

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

        // set new image size
        tweekit.resultWidth = parseInt(width)
        tweekit.resultHeight = parseInt(height)

        const croppedImgFile = await tweekit.result()

        return  URL.createObjectURL(croppedImgFile)
    }


    $(document).ready(function() {
        $('.lazyImg').each(async function() {
            const {
                imgUrl,
                width ,
                height
            } = $(this).data()

            const croppedImgUrl = await resizeImg(imgUrl,width, height)

            $(this).attr('src', croppedImgUrl)
        })
    })