Add signature from base64 /blob in vue-signature-pad

[lukpeta]

Hi,
I am beginner web developer. I make my first project in Vue 2.,
I have in my view vue-signature-pad (https://github.com/neighborhood999/vue-signature-pad) .Im finished add signature to database (project in Laravel).Now I try make edit view.

I have this code: https://pastebin.com/VrxXDAsK

Herę is my vie-signature-pad:

<vue-signature-pad
                          id="signature"
                          width="100%"
                          height="500px"
                          ref="signaturePad"
                          :options="{
                            onBegin: () => {$refs.signaturePad.resizeCanvas()},
                        }"
                        />

In this place:

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);
        }

      }
    }

I convert my base64 string from db to blob and try add image to signature pad.
in self.form.delivery_signature I have this string: https://pastebin.com/icFLvscX

I haven't any errors in console and I havens image with signature in my vue-signature-pad.

What's is wrong? How can I repair it?

Please help me.

[tarunsamuel7]

Loading data should happen after resizeCanvas().