安卓端报错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
showSignature: function() {
wx.setStorageSync('draw', false)
let that = this
this.setData({
signatureShow: true
})
setTimeout(function () {
that.initCanvas()
}, 500)
},
// 初始化
initCanvas() {
const query = wx.createSelectorQuery()
query.select('#canvas')
.fields({ node: true, size: true })
.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({
x: 100,
y: 200,
width: wx.getSystemInfoSync().windowWidth,
height: 200,
destWidth: wx.getSystemInfoSync().windowWidth,
destHeight: 200,
canvas: this.data.canvas,//画布标识,传入 canvas 组件实例 (canvas type="2d" 时使用该属性)。
success(res) {
// 此处省略的上传图片到服务器的代码
that.setData({ signatureShow: false }) //关闭签名popup
},
fail(err) {
console.log(err) // 此处输出报错内容:canvasToTempFilePath:fail height is 0
wx.showModal({
title: '提示',
content: err.errMsg,
showCancel: false
})
}
})
}
样式问题