c***@163.com
c***@163.com
  • 发布:2022-07-14 22:38
  • 更新:2023-10-25 20:49
  • 阅读:1022

【报Bug】支付宝小程序 canvas 画布失效, 无法做个签名的功能

分类:uni-app

产品分类: uniapp/小程序/阿里

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

第三方开发者工具版本号: 3.1.2

基础库版本号: 不知道指哪个

项目创建方式: HBuilderX

示例代码:

<template>
<view class='contents'>
<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)'
@touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
</canvas>
<view class="caozuo">
<view class="chongqian" @tap='clearClick'>
重签
</view>
<view class="over" @tap="overSign">
完成签名
</view>
</view>
</view>
</template>

<script>
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var _that;
//获取系统信息
uni.getSystemInfo({
success: function(res) {
canvasw = res.windowWidth;
canvash = res.windowHeight;
},
})
export default {
data() {
return {
signImage: '',
isEnd: false // 是否签名
}
},

    methods: {  
        overSign: function() {  
            if (this.isEnd) {  
                uni.canvasToTempFilePath({  
                    canvasId: 'firstCanvas',  

                    success: function(res) {  
                        //打印图片路径  
                        console.log(res.tempFilePath)  
                        console.log('完成签名')  
                        //设置图片  
                        _that.signImage = res.tempFilePath  
                    }  
                })  
            } else {  
                uni.showToast({  
                    title: '请先完成签名',  
                    icon: "none",  
                    duration: 1500,  
                    mask: true  
                })  
            }  

        },  

        // 画布的触摸移动开始手势响应  
        start: function(event) {  
            // console.log(event)  
            console.log("触摸开始" + event.changedTouches[0].x)  
            console.log("触摸开始" + event.changedTouches[0].y)  
            //获取触摸开始的 x,y  
            let point = {  
                x: event.changedTouches[0].x,  
                y: event.changedTouches[0].y  
            }  
            // console.log(point)  
            touchs.push(point);  

        },  
        // 画布的触摸移动手势响应  
        move: function(e) {  
            let point = {  
                x: e.touches[0].x,  
                y: e.touches[0].y  
            }  
            // console.log(point)  
            touchs.push(point)  
            if (touchs.length >= 2) {  
                this.draw(touchs)  
            }  
        },  

        // 画布的触摸移动结束手势响应  
        end: function(e) {  
            console.log("触摸结束" + e)  
            // 设置为已经签名  
            this.isEnd = true  
            // 清空轨迹数组  
            for (let i = 0; i < touchs.length; i++) {  
                touchs.pop()  
            }  

        },  

        // 画布的触摸取消响应  
        cancel: function(e) {  
            console.log("触摸取消" + e)  
        },  

        // 画布的长按手势响应  
        tap: function(e) {  
            console.log("长按手势" + e)  
        },  

        error: function(e) {  
            console.log("画布触摸错误" + e)  
        },  

        //绘制  
        draw: function(touchs) {  
            console.log(touchs[0], touchs[1])  
            let point1 = touchs[0]  
            let point2 = touchs[1]  
            touchs.shift()  
            content.moveTo(point1.x, point1.y)  
            content.lineTo(point2.x, point2.y)  
            content.stroke()  
            content.draw(true)  
        },  
        //清除操作  
        clearClick: function() {  
            // 设置为未签名  
            this.isEnd = false  
            //清除画布  
            content.clearRect(0, 0, canvasw, canvash)  
            content.draw(true)  
        },  
    },  
    /**  
     * 生命周期函数--监听页面加载  
     */  
    onLoad: function(options) {  
        _that = this  
        //获得Canvas的上下文  
        content = wx.createCanvasContext('firstCanvas')  
        //设置线的颜色  
        content.setStrokeStyle("#000")  
        //设置线的宽度  
        content.setLineWidth(5)  
        //设置线两端端点样式更加圆润  
        content.setLineCap('round')  
        //设置两条线连接处更加圆润  
        content.setLineJoin('round')  
    },  

}  

</script>

<style>
.ts {
color: #FF485D;
font-size: 30upx;
height: 100upx;
line-height: 100upx;
padding-left: 20upx;
}

canvas {  
    background-color: #DDDDDD;  
    width: 700upx;  
    margin: 0 25upx;  
    height: calc(100vh - 140upx);  
}  

.contents {  
    padding-top: 20upx;  
    padding-bottom: 100upx;  
    box-sizing: border-box;  
}  

#signatureImg {  
    background-color: #EEEEEE;  
}  

.caozuo {  
    display: flex;  
    height: 100upx;  
    width: 750upx;  
    position: fixed;  
    left: 0;  
    bottom: 0;  
}  

.caozuo view {  
    width: 375upx;  
    text-align: center;  
    height: 100upx;  
    line-height: 100upx;  
    color: #FFFFFF;  
}  

.caozuo view:active {  
    background-color: #CCCCCC;  
    color: #333333;  
}  

.chongqian {  
    background-color: #FF8F58;  
}  

.over {  
    background-color: #0599D7;  
}  

</style>

操作步骤:

粘贴代码试试 就行

预期结果:

支付宝小程序 也能直接 上面写字,目前只能微信可以

实际结果:

支付宝小程序 也能直接 上面写字,目前只能微信可以

bug描述:

uniapp 使用canvas 做个签名的页面, 支付宝小程序 无法使用画布, 微信小程序正常。

2022-07-14 22:38 负责人:无 分享
已邀请:
c***@163.com

c***@163.com (作者)

可以用这个代码,直接试试效果,微信小程序正常,支付宝不行

<template>
<view class='contents'>
<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)'
@touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
</canvas>
<view class="caozuo">
<view class="chongqian" @tap='clearClick'>
重签
</view>
<view class="over" @tap="overSign">
完成签名
</view>
</view>
</view>
</template>

<script>
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var _that;
//获取系统信息
uni.getSystemInfo({
success: function(res) {
canvasw = res.windowWidth;
canvash = res.windowHeight;
},
})
export default {
data() {
return {
signImage: '',
isEnd: false // 是否签名
}
},

    methods: {  
        overSign: function() {  
            if (this.isEnd) {  
                uni.canvasToTempFilePath({  
                    canvasId: 'firstCanvas',  

                    success: function(res) {  
                        //打印图片路径  
                        console.log(res.tempFilePath)  
                        console.log('完成签名')  
                        //设置图片  
                        _that.signImage = res.tempFilePath  
                    }  
                })  
            } else {  
                uni.showToast({  
                    title: '请先完成签名',  
                    icon: "none",  
                    duration: 1500,  
                    mask: true  
                })  
            }  

        },  

        // 画布的触摸移动开始手势响应  
        start: function(event) {  
            // console.log(event)  
            console.log("触摸开始" + event.changedTouches[0].x)  
            console.log("触摸开始" + event.changedTouches[0].y)  
            //获取触摸开始的 x,y  
            let point = {  
                x: event.changedTouches[0].x,  
                y: event.changedTouches[0].y  
            }  
            // console.log(point)  
            touchs.push(point);  

        },  
        // 画布的触摸移动手势响应  
        move: function(e) {  
            let point = {  
                x: e.touches[0].x,  
                y: e.touches[0].y  
            }  
            // console.log(point)  
            touchs.push(point)  
            if (touchs.length >= 2) {  
                this.draw(touchs)  
            }  
        },  

        // 画布的触摸移动结束手势响应  
        end: function(e) {  
            console.log("触摸结束" + e)  
            // 设置为已经签名  
            this.isEnd = true  
            // 清空轨迹数组  
            for (let i = 0; i < touchs.length; i++) {  
                touchs.pop()  
            }  

        },  

        // 画布的触摸取消响应  
        cancel: function(e) {  
            console.log("触摸取消" + e)  
        },  

        // 画布的长按手势响应  
        tap: function(e) {  
            console.log("长按手势" + e)  
        },  

        error: function(e) {  
            console.log("画布触摸错误" + e)  
        },  

        //绘制  
        draw: function(touchs) {  
            console.log(touchs[0], touchs[1])  
            let point1 = touchs[0]  
            let point2 = touchs[1]  
            touchs.shift()  
            content.moveTo(point1.x, point1.y)  
            content.lineTo(point2.x, point2.y)  
            content.stroke()  
            content.draw(true)  
        },  
        //清除操作  
        clearClick: function() {  
            // 设置为未签名  
            this.isEnd = false  
            //清除画布  
            content.clearRect(0, 0, canvasw, canvash)  
            content.draw(true)  
        },  
    },  
    /**  
     * 生命周期函数--监听页面加载  
     */  
    onLoad: function(options) {  
        _that = this  
        //获得Canvas的上下文  
        content = wx.createCanvasContext('firstCanvas')  
        //设置线的颜色  
        content.setStrokeStyle("#000")  
        //设置线的宽度  
        content.setLineWidth(5)  
        //设置线两端端点样式更加圆润  
        content.setLineCap('round')  
        //设置两条线连接处更加圆润  
        content.setLineJoin('round')  
    },  

}  

</script>

<style>
.ts {
color: #FF485D;
font-size: 30upx;
height: 100upx;
line-height: 100upx;
padding-left: 20upx;
}

canvas {  
    background-color: #DDDDDD;  
    width: 700upx;  
    margin: 0 25upx;  
    height: calc(100vh - 140upx);  
}  

.contents {  
    padding-top: 20upx;  
    padding-bottom: 100upx;  
    box-sizing: border-box;  
}  

#signatureImg {  
    background-color: #EEEEEE;  
}  

.caozuo {  
    display: flex;  
    height: 100upx;  
    width: 750upx;  
    position: fixed;  
    left: 0;  
    bottom: 0;  
}  

.caozuo view {  
    width: 375upx;  
    text-align: center;  
    height: 100upx;  
    line-height: 100upx;  
    color: #FFFFFF;  
}  

.caozuo view:active {  
    background-color: #CCCCCC;  
    color: #333333;  
}  

.chongqian {  
    background-color: #FF8F58;  
}  

.over {  
    background-color: #0599D7;  
}  

</style>

陌上华年

陌上华年

你这代码都不全。。。

a***@163.com

a***@163.com - 一个程序员

虽然很狗血,但是我找到解决办法了,分享一下:
首先,画布定义 增加一个id 如: <canvas id="testCanvas" xxxxxx></canvas>
第二,代码兼容:
let ctx= null;
// #ifdef MP-ALIPAY
ctx= my.createCanvasContext('bestGaugeCanvas');
// #endif
// #ifndef MP-ALIPAY
ctx= uni.createCanvasContext(你的画布id, _this);
// #endif

xinqianbobo

xinqianbobo

兄弟请问解决了吗

要回复问题请先登录注册