uni-app 3.0.7.20210123 HbuilderX canvas 保存的是空白图片

uni-app 3.0.7.20210123 HbuilderX canvas 保存的是空白图片

开发环境 版本号 项目创建方式
Windows 20H2 19042.746 HBuilderX

产品分类：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)  
}

操作步骤：

详见上面的示例

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 绘制图片，保存的图片是空白的

更多关于uni-app 3.0.7.20210123 HbuilderX canvas 保存的是空白图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

试试最新版是否正常

更多关于uni-app 3.0.7.20210123 HbuilderX canvas 保存的是空白图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


新版已经ok了，新版本中ok的 请关注一下这个问题：https://ask.dcloud.net.cn/question/110858

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

这是一个常见的uni-app canvas保存空白图片的问题，主要原因是绘制和保存的时序问题。以下是解决方案：

  1. 确保所有图片资源加载完成后再绘制：
post() {
    var that = this
    uni.showLoading({
        title: '保存中'
    });
    
    // 先预加载所有图片
    Promise.all([
        new Promise(resolve => {
            const img = new Image()
            img.src = 'http://xxxx.com/xxx.png'
            img.onload = resolve
        }),
        new Promise(resolve => {
            const img = new Image()
            img.src = that.img
            img.onload = resolve
        })
    ]).then(() => {
        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)
        
        // 移除不必要的save/restore
        context.beginPath()
        context.arc(44, 350, 25, 0, 2 * Math.PI)
        context.clip()
        
        // 使用回调确保绘制完成
        context.draw(false, () => {
            uni.canvasToTempFilePath({
                canvasId: 'firstCanvas',
                success: function(res) {
                    uni.hideLoading()
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: function() {
                            uni.showToast({title: '保存相册成功'})
                        },
                        fail(res) {
                            if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
                                uni.showModal({
                                    title: '您需要授权相册权限',
                                    success(res) {
                                        if (res.confirm) {
                                            uni.openSetting()
                                        }
                                    }
                                })
                            }
                        }
                    });
                },
                fail(res) {
                    uni.hideLoading()
                    console.error('保存失败', res)
                }
            }, this)
        })
    })
}
回到顶部