Render and resize new avatar selection

components/app.vue

@@ -95,6 +95,10 @@ function getUser() {
 	}).then (result => {
 		if (!result || !result.length) return // Exit if token is invalid
 		this.user = result[0]
+		if (this.user.avatar) return
+		
+		fetch("/assets/image/empty-avatar.jpg").then(r => r.blob()).
+		then(b => this.user.avatar = b)
 	})
 
 }

components/settings.vue

@@ -4,7 +4,10 @@
 
 <section class="form inputs">
 <h3>Avatar</h3>
-<img src="/assets/image/mintberry.jpg" alt="avatar">
+<canvas width="200" height="200" ref="canvas"></canvas>
+<input type="file"
+@change="e => changeAvatar(e.target.files[0])"
+/>
 <button>Upload</button>
 </section>
 
@@ -52,25 +55,43 @@
 </div>
 </template>
 
-<script>
+<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() {
-	this.ready = true
+	ready.value = true
+}
+
+function uploadAvatar(blob) {
+
 }
 
-export default {
-	components: {
-		Dialog
-	},
-	methods: {
-		save, check
-	},
-	data() {
-		return { ready: false }
-	}
+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>