54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<nut-signature @confirm="confirm" @clear="clear"></nut-signature>
|
||
|
|
<img v-if="imgData" :src="imgData" class="imgData" style="width: 100%" />
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useDailyStore } from '@/store/daily'
|
||
|
|
const store = useDailyStore()
|
||
|
|
import Taro, { useLoad } from '@tarojs/taro'
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
const _index = ref(0)
|
||
|
|
useLoad((options) => {
|
||
|
|
console.log(options)
|
||
|
|
_index.value = Number(options.index)
|
||
|
|
})
|
||
|
|
const imgData = ref('')
|
||
|
|
const convertToBase64 = (imgUrl: string): Promise<string> => {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
const fs = Taro.getFileSystemManager()
|
||
|
|
fs.readFile({
|
||
|
|
filePath: imgUrl, // 本地路径
|
||
|
|
encoding: 'base64',
|
||
|
|
success(res) {
|
||
|
|
resolve('data:image/png;base64,' + res.data) // 前缀加上 image 类型，适应 img 标签
|
||
|
|
},
|
||
|
|
fail(err) {
|
||
|
|
reject(err)
|
||
|
|
},
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const confirm = async (canvas: any, data: string) => {
|
||
|
|
if (data) {
|
||
|
|
imgData.value = data
|
||
|
|
console.log('imgData', canvas, data)
|
||
|
|
try {
|
||
|
|
const base64Image = await convertToBase64(data)
|
||
|
|
if (_index.value === 1) {
|
||
|
|
store.change_base64_1(base64Image)
|
||
|
|
} else {
|
||
|
|
store.change_base64_2(base64Image)
|
||
|
|
}
|
||
|
|
// console.log('Base64 Image:', base64Image)
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to convert image to Base64:', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const clear = () => {
|
||
|
|
imgData.value = ''
|
||
|
|
console.log('clear')
|
||
|
|
}
|
||
|
|
</script>
|