mirror of
https://github.com/enso-org/enso.git
synced 2024-12-20 06:51:33 +03:00
47 lines
1.7 KiB
Vue
47 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
import ImageBase64Visualization from '@/components/visualizations/ImageBase64Visualization.vue'
|
|
import HstFile from './histoire/HstFile.vue'
|
|
|
|
const data = ref<any>({
|
|
mediaType: 'image/svg+xml',
|
|
base64: `PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0\
|
|
MCI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cGF0aCBkPSJNMjAuMDUgMEEyMCAyMCAwIDAgMCAwIDIwLjA1IDIwLjA2IDIwLjA\
|
|
2IDAgMSAwIDIwLjA1IDBabTAgMzYuMDVjLTguOTMgMC0xNi4xLTcuMTctMTYuMS0xNi4xIDAtOC45NCA3LjE3LTE2LjEgMTYuMS\
|
|
0xNi4xIDguOTQgMCAxNi4xIDcuMTYgMTYuMSAxNi4xYTE2LjE4IDE2LjE4IDAgMCAxLTE2LjEgMTYuMVoiLz48cGF0aCBkPSJNM\
|
|
jcuMTIgMTcuNzdhNC42OCA0LjY4IDAgMCAxIDIuMzkgNS45MiAxMC4yMiAxMC4yMiAwIDAgMS05LjU2IDYuODZBMTAuMiAxMC4y\
|
|
IDAgMCAxIDkuNzcgMjAuMzZzMS41NSAyLjA4IDQuNTcgMi4wOGMzLjAxIDAgNC4zNi0xLjE0IDUuNi0yLjA4IDEuMjUtLjkzIDI\
|
|
uMDktMyA1LjItMyAuNzMgMCAxLjQ2LjIgMS45OC40WiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9Ii\
|
|
NmZmYiIGQ9Ik0wIDBoNDB2NDBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=`,
|
|
})
|
|
|
|
async function updateFile(file: File) {
|
|
const base64 = await new Promise<string>((resolve, reject) => {
|
|
const reader = new FileReader()
|
|
reader.readAsDataURL(file)
|
|
reader.onload = () => resolve(reader.result as string)
|
|
reader.onerror = reject
|
|
})
|
|
data.value = { mediaType: file.type, base64: base64.split(',')[1] }
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Story
|
|
title="Image"
|
|
group="visualizations"
|
|
:layout="{ type: 'grid', width: 400 }"
|
|
autoPropsDisabled
|
|
>
|
|
<div style="height: 322px">
|
|
<ImageBase64Visualization :data="data" />
|
|
</div>
|
|
|
|
<template #controls>
|
|
<HstJson v-model="data" title="data" />
|
|
<HstFile type="file" title="image" accept="image/*" @update:file="updateFile" />
|
|
</template>
|
|
</Story>
|
|
</template>
|