diff --git a/assets/image/empty-avatar.jpg b/assets/image/empty-avatar.jpg new file mode 100644 index 0000000..299e85c Binary files /dev/null and b/assets/image/empty-avatar.jpg differ diff --git a/components/app.vue b/components/app.vue index 49898d4..2a99736 100644 --- a/components/app.vue +++ b/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) }) } diff --git a/components/settings.vue b/components/settings.vue index f4b45af..d9eba03 100644 --- a/components/settings.vue +++ 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>