How to use pica.js to minify/shrink image on form submit?

[Alin Climente]

Most probably I'm not using it right but I can't figure out how to shrink image on form submit.

The head
<script defer src="./static/pica.min.js"></script>
(do I need to add something else?)
The form

<form> 
    <label for="foto">Add foto:</label>
    <input type="file" id="foto" name="foto" accept="image/*">
    <button type="submit">Add</button>
</form>

The script

document.querySelector('form').addEventListener('submit', (event) => {
        event.preventDefault() 
        const form_data = new FormData(event.target)
        const form_obj = Object.fromEntries(form_data)
       
        console.log(form_obj)
        console.log(form_obj["foto"].name)
       
        let canvas = document.createElement('canvas')
        pica.resize(form_obj["foto"], canvas).then((img_shrinked) => {
            console.info("Image shrinked!")
            form_obj["foto"] = img_shrinked
            console.log(form_obj)
        })
    })

Tried const pica = Pica() but says Pica not found with just pica.resize(.. says pica.resize is not a function

[Vitaly Puzrin]

That's a bit out of project scope. Please check previous issues, i provided links to samples of correct files resize.

[Vitaly Puzrin]

https://github.com/nodeca/image-blob-reduce