嗨哆嚒
嗨哆嚒
  • 发布:2022-07-04 18:05
  • 更新:2022-07-05 11:05
  • 阅读:677

【报Bug】ctx.draw H5不生效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.4.18

浏览器平台: Chrome

浏览器版本: 1

项目创建方式: HBuilderX

示例代码:

handleCanvas() {
this.$Loading(true)

            let ctx = uni.createCanvasContext('payImg', this)  

            ctx.drawImage('图片地址', 0, 0, 545, 674)  

            ctx.save(); //保存  

            ctx.draw(false, () => {  
                setTimeout(() => {  
                    $this.handleTempFilePath()  
                }, 1500)  
            })  

            this.$Loading(false)  
            $this.showImg = true  
        },  

        //获取绘制的图片  
        handleTempFilePath() {  
            console.log(1);  
            uni.canvasToTempFilePath({  
                x: 0,  
                y: 0,  
                width: 545,  
                height: 674,  
                destWidth: 545,  
                destHeight: 674,  
                fileType: 'jpg',  
                quality: 1,  
                canvasId: 'payImg',  
                success: function(res) {  
                    // 在H5平台下,tempFilePath 为 base64  
                    $this.imgUrl = res.tempFilePath  
                    console.log(res)  
                },  
                fail(res) {  
                    console.log(res);  
                },  
                complete(res) {  
                    console.log(res);  
                },  
            })  

        },

操作步骤:

如上

预期结果:

显示图片

实际结果:

一片空白

bug描述:

ctx.draw 不生效,uni.canvasToTempFilePath不生效

2022-07-04 18:05 负责人:无 分享
已邀请:
嗨哆嚒

嗨哆嚒 (作者) - 嗨哆嚒

csdn找到的解决方案,两个方法可以执行了,但执行结果为空白

ctx.draw(false, (() => {
setTimeout(() => {
console.log('画好了');
//其他处理
}, 1500)
})())

该问题目前已经被锁定, 无法添加新回复