将签名加载到 vue-signature-pad

Question

我是vue初学者。我的第一个 post 在这里。我在 Vue 2 中制作我的项目。

<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'}
                        }"
                        />

这很好。当我点击 cavas - 我可以绘画。

现在，我需要将数据库中的签名添加到此 canvas（页面重新加载后）。我可以在 php 中创建图像。为了测试，我尝试将此图片添加到 canvas：https://a.allegroimg.com/s1024/11837d/f04da35e4213a6f817918924c51f/8BitDo-ADAPTER-GRAJ-PADEM-PS4-XBOX-NA-SWITCH-PC-Sposob-podlaczenia-bezprzewodowy

但它不可见:(

如何修复？

Answer 1

看看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)
      }
    })
  }
...

将签名加载到 vue-signature-pad

Load signature to vue-signature-pad

javascript

laravel

vue.js