3***@qq.com
3***@qq.com
  • 发布:2021-02-05 15:25
  • 更新:2021-02-18 15:14
  • 阅读:696

【报Bug】3.0.7.20210123 HbuilderX canvas 保存的是空白图片

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 20H2 19042.746

HBuilderX类型: 正式

HBuilderX版本号: 3.0.7

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: redmik30 pro

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
post() {  
                var that = this  
                uni.showLoading({  
                    title: '保存中'  
                });  
                const context = uni.createCanvasContext('firstCanvas')  

                context.drawImage('http://xxxx.com/xxx.png',0, 0, 375, 473)  //这是背景图片  
                context.drawImage(that.img, 87.5, 150, 200, 200) //这是二维码  

                context.save()  
                context.beginPath()  
                context.arc(44, 350, 25, 0, 2 * Math.PI)  
                context.clip()  
                context.restore()  
                context.draw()  
                setTimeout(function(){  
                    uni.canvasToTempFilePath({  
                        x: 0,  
                        y: 0,  
                        // width: 375,  
                        // height: 473,  
                        // destWidth: 700,  
                        // destHeight: 1000,  
                        canvasId: 'firstCanvas',  
                        success: function(res) {  
                            console.log(res.tempFilePath)  
                            uni.hideLoading()  
                            uni.saveImageToPhotosAlbum({  
                                filePath: res.tempFilePath,  
                                success: function(red) {  
                                    uni.showToast({  
                                        title: '保存相册成功'  
                                    })  
                                },  
                                fail(res) {  
                                    console.log(res)  
                                    if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {  
                                        uni.showModal({  
                                            title: '您需要授权相册权限',  
                                            success(res) {  
                                                if (res.confirm) {  
                                                    uni.openSetting({  
                                                        success(res) {  

                                                        },  
                                                        fail(res) {  
                                                            console.log(res)  
                                                        }  
                                                    })  
                                                }  
                                            }  
                                        })  
                                    }  
                                }  
                            });  
                        },  
                        fail(res) {  
                            uni.hideLoading()  
                        }  
                    }, this)  
                },4000)  
            }

操作步骤:

详见上面的示例
const context = uni.createCanvasContext('firstCanvas')

            context.drawImage('http://xxxx.com/xxx.png',0, 0, 375, 473)  
            context.drawImage(that.img, 87.5, 150, 200, 200)  

            context.save()  
            context.beginPath()  
            context.arc(44, 350, 25, 0, 2 * Math.PI)  
            context.clip()  
            context.restore()  
            context.draw()  

uni.canvasToTempFilePath({canvasId: 'firstCanvas',})

预期结果:

用canvasToTempFilePath 保存 canvas绘制的图片,保存到相册,应该正常显示才对

实际结果:

用canvasToTempFilePath 保存 canvas绘制的图片,保存到相册,保存到相册是空白的

bug描述:

最新的hbuilderX, 版本号是:3.0.7.20210123
打包出来的app, canvas 绘制图片,保存的图片是空白的图片

2021-02-05 15:25 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

试试最新版是否正常

  • 3***@qq.com (作者)

    新版已经ok了,新版本中ok的

    请关注一下这个问题:https://ask.dcloud.net.cn/question/110858

    2021-02-21 18:30

  • DCloud_UNI_GSQ

    回复 3***@qq.com: 收到

    2021-02-22 10:55

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