Witajcie,
Robię projekt w Vue 2 I wykorzystuje w nim vue-signature-pad (https://github.com/neighborhood999/vue-signature-pad) .
Zrobiłem dodawanie podpisu do bazy danych, a teraz próbuję zrobić edycję
Pełen kod: https://pastebin.com/VrxXDAsK
vie-signature-pad:
<vue-signature-pad
id="signature"
width="100%"
height="500px"
ref="signaturePad"
:options="{
onBegin: () => {$refs.signaturePad.resizeCanvas()},
}"
/>
W tym miejscu mam funkcję do zamiany base64 na bloba:
getSignature(){
let self = this;
if(self.form.delivery_signature != 'undefined'){
self.$refs.signaturePad.fromDataURL(self.form.delivery_signature);
this.$refs.signaturePad.fromDataURL(self.form.delivery_signature);
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
const contentType = 'image/png';
const b64Data = self.form.delivery_signature.replace('data:image/png;base64,','');
const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);
// const img = document.createElement('img');
// img.src = blobUrl;
// document.body.appendChild(img);
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
self.$refs.signaturePad.fromDataURL(reader.result);
this.$refs.signaturePad.fromDataURL(reader.result);
console.log(reader);
}
}
}
W self.form.delivery_signature mam string: https://pastebin.com/icFLvscX
W konsoli nie mam żadnych błędów, a podpis się nie dodaje w vue-signature-pad. Pomimo tego podpis nie ładuje się do signature-pad :(
Wie ktoś może co jest nie tak?
Z góry dziękuję za pomoc :)