elk/components/common/CommonBlurhash.ts

42 lines
992 B
TypeScript
Raw Normal View History

2022-11-21 13:21:53 +00:00
import { decode } from 'blurhash'
2022-11-28 07:12:13 +00:00
import { getDataUrlFromArr } from '~/composables/utils'
2022-11-21 13:21:53 +00:00
export default defineComponent({
inheritAttrs: false,
props: {
blurhash: {
type: String,
required: true,
},
src: {
type: String,
required: true,
},
},
setup(props, { attrs }) {
const placeholderSrc = ref<string>()
const isLoaded = ref(false)
onMounted(() => {
const img = document.createElement('img')
2022-11-27 13:12:25 +00:00
isLoaded.value = img.complete
2022-11-21 13:21:53 +00:00
img.onload = () => {
isLoaded.value = true
}
img.src = props.src
2022-11-24 04:13:13 +00:00
setTimeout(() => {
isLoaded.value = true
}, 3_000)
2022-11-21 13:21:53 +00:00
if (props.blurhash) {
const pixels = decode(props.blurhash, 32, 32)
placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
}
})
return () => isLoaded.value || !placeholderSrc.value
? h('img', { ...attrs, src: props.src })
: h('img', { ...attrs, src: placeholderSrc.value })
},
})