usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wait for decode

This commit is contained in:
tamaina 2023-05-08 11:40:36 +00:00
parent c21e1418cd
commit f618d90a2f
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/frontend/src/components/MkImgWithBlurhash.vue
View File

@ -10,7 +10,7 @@
:leave-from-class="defaultStore.state.animation && props.transition?.leaveFromClass || undefined" :leave-from-class="defaultStore.state.animation && props.transition?.leaveFromClass || undefined"
> >
<canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/> <canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
<img v-show="!hide" key="img" :height="imgHeight" :width="imgWidth" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" @load="onLoad"/> <img v-show="!hide" key="img" ref="img" :height="imgHeight" :width="imgWidth" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" decoding="async"/>
</TransitionGroup> </TransitionGroup>
</div> </div>
</template> </template>
@ -30,7 +30,7 @@ const workerPromise = new Promise<Worker | null>(resolve => {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue'; import { computed, nextTick, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import { render } from 'buraha'; import { render } from 'buraha';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
@ -68,6 +68,7 @@ const props = withDefaults(defineProps<{
const viewId = uuid(); const viewId = uuid();
const canvas = shallowRef<HTMLCanvasElement>(); const canvas = shallowRef<HTMLCanvasElement>();
const root = shallowRef<HTMLDivElement>(); const root = shallowRef<HTMLDivElement>();
const img = shallowRef<HTMLImageElement>();
let loaded = $ref(false); let loaded = $ref(false);
let canvasWidth = $ref(64); let canvasWidth = $ref(64);
let canvasHeight = $ref(64); let canvasHeight = $ref(64);
@ -75,10 +76,25 @@ let imgWidth = $ref(props.width);
let imgHeight = $ref(props.height); let imgHeight = $ref(props.height);
const hide = computed(() => !loaded || props.forceBlurhash); const hide = computed(() => !loaded || props.forceBlurhash);
function onLoad() { function waitForDecode() {
loaded = true; if (props.src != null && props.src !== '') {
nextTick()
.then(() => img.value?.decode())
.then(() => {
loaded = true;
}, error => {
console.error('Error occured during decoding image', img.value, error);
throw Error(error);
});
} else {
loaded = false;
}
} }
watch(() => props.src, () => {
waitForDecode();
});
watch([() => props.width, () => props.height, root], () => { watch([() => props.width, () => props.height, root], () => {
const ratio = props.width / props.height; const ratio = props.width / props.height;
if (ratio > 1) { if (ratio > 1) {
@ -130,6 +146,7 @@ watch(() => props.hash, () => {
onMounted(() => { onMounted(() => {
draw(true); draw(true);
waitForDecode();
}); });
onUnmounted(() => { onUnmounted(() => {