I am beginner in vue. I have my firs post here. I make my project in Vue 2.
I have this code: https://pastebin.com/Ddaqf6E9
<vue-signature-pad
id="signature"
width="100%"
height="500px"
ref="signaturePad"
:options="{
onBegin: () => {$refs.signaturePad.resizeCanvas()},
images: () => { 'https://a.allegroimg.com/s1024/11837d/f04da35e4213a6f817918924c51f/8BitDo-ADAPTER-GRAJ-PADEM-PS4-XBOX-NA-SWITCH-PC-Sposob-podlaczenia-bezprzewodowy'}
}"
/>
This is work fine. When I click on cavas - I can painting.
Now, I need add signature from database to this canvas (after page reload). I can create image in php. For test I try add to canvas this image: https://a.allegroimg.com/s1024/11837d/f04da35e4213a6f817918924c51f/8BitDo-ADAPTER-GRAJ-PADEM-PS4-XBOX-NA-SWITCH-PC-Sposob-podlaczenia-bezprzewodowy
but it's not visible :(
How can I repair it?
Take a look at this demo
...
async mounted() {
fetch("https://a.allegroimg.com/s1024/11837d/f04da35e4213a6f817918924c51f/8BitDo-ADAPTER-GRAJ-PADEM-PS4-XBOX-NA-SWITCH-PC-Sposob-podlaczenia-bezprzewodowy")
.then(raw => raw.blob())
.then(blob => {
const reader = new FileReader();
reader.readAsDataURL(blob)
reader.onloadend = () => {
this.$refs.signaturePad.fromDataURL(reader.result)
}
})
}
...