canvas画布下载图片空白

Question

<el-button type="primary" class="footer-button"  @click='signName'>签名</el-button>
              <el-dialog title="电子签名" :visible.sync="dialogTableVisible" :append-to-body="true">
                  <sign-canvas
                  class="sign-canvas"
                  ref="SignCanvas"
                  :options="options"
                  v-model="value"/>
                  <div class="btnList">
                      <el-button @click="canvasClear" type="primary">清空</el-button>
                      <el-button @click="saveAsImg" type="primary">保存</el-button>
                      <el-button @click="downloadSignImg" type="primary">下载</el-button>
                  </div>
              </el-dialog>
value: null, //画布内的值 
     options: {
      isFullScreen: true, //是否全屏手写 [Boolean] 可选
      isFullCover: false, //是否全屏模式下覆盖所有的元素 [Boolean] 可选
      isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
      lastWriteSpeed: 1, //书写速度 [Number] 可选
      lastWriteWidth: 2, //下笔的宽度 [Number] 可选
      lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
      lineJoin: "round", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
      canvasWidth: 150, //canvas宽高 [Number] 可选
      canvasHeight: 200, //高度  [Number] 可选
      isShowBorder: true, //是否显示边框 [可选]
      bgColor: "#fff", //背景色 [String] 可选
      borderWidth: 1, // 网格线宽度  [Number] 可选
      borderColor: "#000", //网格颜色  [String] 可选
      writeWidth: 5, //基础轨迹宽度  [Number] 可选
      maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
      minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
      writeColor: "#101010", // 轨迹颜色  [String] 可选
      isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
      imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
  },

canvasClear(){
    console.log("狗东西")
  this.$nextTick(()=>{
  console.log('清空')
  console.log(this.$refs.SignCanvas[0].canvasClear())//undefined
  this.$refs.SignCanvas[0].canvasClear()
  })
},
saveAsImg() {
        this.img = this.$refs.SignCanvas[0].saveAsImg();
        console.log(this.img);
    },
 downloadSignImg() {
              console.log("下载")
              console.log(this.$refs.SignCanvas[0].downloadSignImg())//undefined
             this.$refs.SignCanvas[0].downloadSignImg();
    },
 signName(){
      this.dialogTableVisible=true;
    }

图一：显示页面

为什么this.$refs.SignCanvas[0].downloadSignImg();和this.$refs.SignCanvas[0].canvasClear()都是打印的undefined，而且下载的图片都是空白

Answer 1

你为什么要写 [0] 啊