ImagePicker.vue

<template>
    <input ref="imagePicker" type="file" accept="image/*" style="display:none;" @input="handleImage">
</template>

<script>
export default {
    name: "ImagePicker",
    methods:  {
        async handleImage() {
            let image = this.$refs.imagePicker.files[0]
            if(image.type != "image/webp") {
                let img = document.createElement("img")
                img.src = URL.createObjectURL(image)
                await new Promise(resolve => img.addEventListener("load", () => resolve()))
                let canvas = document.createElement("canvas")
                canvas.width = img.width
                canvas.height = img.height
                canvas.getContext("2d").drawImage(img, 0, 0)
                image = await new Promise(resolve => {
                    canvas.toBlob(blob => resolve(blob), "image/webp")
                })
            }
            this.$emit("image", image)
        },
        click() {this.$refs.imagePicker.click()}
    }
}
</script>