skouter/components/settings.vue

<template>
<div class="page">
<h2>Settings</h2>

<section class="form inputs">
<h3>Avatar</h3>
<canvas width="200" height="200" ref="canvas"></canvas>
<input type="file"
@change="e => changeAvatar(e.target.files[0])"
/>
<button>Upload</button>
</section>

<section class="form inputs">
<h3>Letterhead</h3>
<span>Header as appears on PDFs.</span>
<img src="/assets/image/mintberry.jpg" alt="avatar">
<button>Upload</button>
</section>

<section class="form inputs special">
<h3>Profile</h3>
<label for="">First Name</label>
<input type="text">
<label for="">Last Name</label>
<input type="text">
<label for="">NMLS ID</label>
<input type="text">
<label for="">Branch ID</label>
<input type="text">

<select id="" name="" >
	<option value="usa">USA</option>
	<option value="canada">Canada</option>
</select>

<button @click="check">Save</button>
</section>

<section class="form inputs special">
<h3>Login</h3>
<label for="">Email</label>
<input type="text">
<label for="">New Password</label>
<input type="text">
<button @click="check">Save</button>
</section>

<Dialog v-if="ready" @close="() => ready = false">
<h3>Confirm your current password to save changes.</h3>
<input type="text">
<button>Confirm</button>
</Dialog>

</div>
</template>

<script setup>
import { ref, watch } from "vue"
import Dialog from "./dialog.vue"

let avatar = ref(null)
let ready = ref(false)
let avatarChanged = ref(false)
const canvas = ref(null)
const props = defineProps(['user', 'token'])

function save() {
}

function check() {
	ready.value = true
}

function uploadAvatar(blob) {

}

function changeAvatar(blob) {
    avatar.value = blob
    createImageBitmap(blob,
    {resizeWidth: 200, resizeHeight: 200, resizeQuality: 'medium'}).
    then((img) => {
        avatar.value = img
        canvas.value.getContext("2d").drawImage(img, 0, 0, 200, 200)
        canvas.value.toBlob(b => {
            console.log(b)
        })
    })
}



watch(props.user, () => {
    changeAvatar(props.user.avatar)
})
</script>