收藏
回答

小程序用canvas做手写签名的时候wx.canvasToTempFilePath在安卓端报错?

安卓端报错canvasToTempFilePath:fail height is 0 但是ios端是正常的。

wxml代码:
<view class="signature">
  <view class="text">安全须知确认签字:</view>
  <view class="text">本人已经阅读相应安全告知,并对本次进港人员进行了传达。</view>
  <view class="start" bindtap="showSignature" wx:if="{{ !imgUrl }}">点击签名</view>
  <van-image width="{{ windowWidth }}" height="200" wx:if="{{ imgUrl }}" src="{{ imgUrl }}"/>
</view>
<van-popup show="{{ signatureShow }}" position="bottom" bind:close="onSignatureClose">
  <view class="signName">
    <canvas id="canvas" type="2d" class="canva" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" style="width: {{windowWidth}}px; height: 200px;"></canvas>
  </view>
  <view style="padding: 10px;">
    <view style="display: flex;justify-content: center;align-items: center;">
      <van-button type="primary" bind:click="uploadImg">确认签名</van-button>
      <van-button type="warning" bind:click="cleardraw">清除签名</van-button>
    </view>
  </view>
</van-popup>
            
js代码:
// 点击“点击签名”按钮的时候弹出签名popup,随后初始化Canvas
showSignaturefunction() { 
  wx.setStorageSync('draw'false)
  let that = this
  this.setData({
    signatureShowtrue
  })
  setTimeout(function () {
    that.initCanvas()
  }, 500)
},

// 初始化
initCanvas() {
  const query = wx.createSelectorQuery()
  query.select('#canvas')
  .fields({ nodetruesizetrue })
  .exec((res) => {
    console.log(res[0]) // 此处输出:{width: 375, height: 200, nodeCanvasType: "2d", node: {id: 97167}}
    const canvas = res[0].node
    this.setData({
      canvas: canvas
    })
    context = canvas.getContext('2d')
    context.fillStyle = '#FFFFFF'
    context.strokeStyle = '#444'
    context.lineWidth = 4
    context.lineCap = 'round'
    context.lineJoin = 'round'
    //设置width和height手写位置才不会发生偏移
    canvas.width = wx.getSystemInfoSync().windowWidth
    canvas.height = 200
  })
},

// 保存签名图片
uploadImg() {
  var that = this
  var draw = wx.getStorageSync('draw')
  if (!draw) {
    Toast('请完成签名!')
    return
  }
  wx.canvasToTempFilePath({
    x100,
    y200,
    width: wx.getSystemInfoSync().windowWidth,
    height200,
    destWidth: wx.getSystemInfoSync().windowWidth,
   destHeight200,
    canvasthis.data.canvas,//画布标识,传入 canvas 组件实例 (canvas type="2d" 时使用该属性)。
    success(res) {
        // 此处省略的上传图片到服务器的代码
        that.setData({ signatureShowfalse }) //关闭签名popup
    },
    fail(err) {
      console.log(err) // 此处输出报错内容:canvasToTempFilePath:fail height is 0
      wx.showModal({
        title'提示',
        content: err.errMsg,
        showCancelfalse
      })
    }
  })
}
                              
最后一次编辑于  2022-06-17
回答关注问题邀请回答
收藏

2 个回答

  •  azatgul
    azatgul
    发表于移动端
    2022-06-17
    帮我登录。
    2022-06-17
    有用 1
    回复
  • smile°
    smile°
    2022-06-17

    样式问题

    2022-06-17
    有用
    回复
登录 后发表内容