拆弹时刻小程序canvas生成海报二优化方案

jiezi

5 年前

海报生成速度缓慢问题的优化
- 微信头像在 app.js 中预先加载缓存
- 多图片异步加载
流程中断处理
- 二次授权失败的处理
- 请求或者下载图片失败处理
保存图片可被压缩

原因分析：
主要的时间消耗在于 getImageInfo 网络请求获取头像和 下载图片 获得临时地址的过程，可以看到海报中有 3 张图片（微信头像、主图、动态二维码（对应不同新闻的 ID））需要下载，接下来主要就是对这 3 张图的优化

//app.js
// 可以在 app.js 中使用小程序默认的全局变量，将头像在加载的时候预先缓存
App({onLaunch: function () {
        // 获取用户信息
        wx.getSetting({
            success: res => {if (res.authSetting['scope.userInfo']) {
                    // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
                    wx.getUserInfo({
                        success: res => {
                            this.globalData.userInfo = res.userInfo;
                            // 从返回值中获取微信头像地址
                            let WxHeader = res.userInfo.avatarUrl;  
                            wx.getImageInfo({
                                src: WxHeader,// 下载微信头像获得临时地址
                                success: res => {
                                    // 将头像缓存在全局变量里
                                    this.globalData.avatarUrlTempPath = res.path;
                                },
                                fail: res => {// 失败回调}
                            });
                        }
                    })
                }
            }
        })
    },
    globalData: {
        userInfo: null,
        // 如果用户没有授权，无法在加载小程序的时候获取头像，就使用默认头像
        avatarUrlTempPath: "./images/defaultHeader.jpg"
    }
})

大致思路是： 加载 App.js 的时候
==> getSetting(判断是否授权)
==> getUserInfo（获取头像）
==> getImageInfo（生成临时地址）
将需要的网络请求在加载小程序的时候就异步完成，提前将临时地址缓存在全局变量 globalData 中，这样当用户进入新闻页面，点击生成海报的时候就不需要在请求微信头像，缩短了不少时间。
注意： 如果用户一开始没有微信授权，生成海报时又必须要用户头像不能使用默认的话，那就只能老老实实走之前的流程了。

let num = 0; // 下载图片计数器，假设一共三张图片
// 下载图片 1
wx.getImageInfo({
    src: image_1,
    success: function (res) {
        // 判断是否是最后一张图
        if (num >= 2) {console.log("图片全部下载完毕，可以绘制海报")
        } else {
            // 如果不是最后一张图则 +1，继续
            num++;
        }
    },
    fail: function (res) {// 失败回调}
});
// 下载图片 2
wx.getImageInfo({
    src: image_2,
    success: function (res) {
        // 判断是否是最后一张图
        if (num >= 2) {console.log("图片全部下载完毕，可以绘制海报")
        } else {
            // 如果不是最后一张图则 +1，继续
            num++;
        }
    }
});
......

这里 智库君 一开始是使用 promise 的同步办法，但是发现 3 张图片 阻塞严重 ，如果一张图片 下载过慢 ，就会影响整个海报生成时间，所以可以改为添加 计数器 判断的异步方法。
当海报生成需要多张图片的时候，完全可以异步的方式加载他们，通过计数器判断是否是最后一张。

从图中可以看出，整个海报生成过程有二次授权：用户信息授权获取头像 和保存相册授权，非常可能因为用户的误点或者拒绝而导致流程中断。

主要分为二种情况：

需要的图片没有拿到，我们可以采取 使用默认图片 的方式替代。
保存相册授权被拒绝，我们可以提示用户“截图保存”，由于当前版本 6.7.2+ 的 wx.openSetting() 被限制（无法直接被调用），如果必须要相册权限，我们可以通过 showModal 触发。

API/ 组件名称	终端类型	微信版本	触发方法
openSetting	6.7.2	2.3.0	showModal

// 关于 openSetting 的调用方法
wx.showModal({
    title: '相册权限',
    content: '需要你提供保存相册权限',
    success: function (res) {if (res.confirm) {
            wx.openSetting({success(settingdata) {console.log(settingdata)
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {console.log('获取 相册 权限成功，给出再次点击图片保存到相册的提示。');
                    } else {console.log('获取 相册 权限失败，给出不给权限就无法正常使用的提示')
                    }
                }
            })
        }
    }
})

// 获取相册权限的流程处理
wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,  //canvasToTempFilePath API 生成的临时地址
    success: function (data) {console.log("提示图片保存成功");
    },
    fail: function (err) {console.log(err);
        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {console.log("当初用户拒绝，再次发起授权")
            // 调用上面说到的方法  wx.openSetting
        } else {console.log("提示：请截屏保存分享");
        }
    },
    complete(res) {console.log(res);
    }
})

小程序官方提供了一个 API 可以设置用户保存图片的质量，仅针对 JPG。

属性	默认值	说明	最低版本
quality	1.0	图片的质量，取值范围为 (0, 1]	1.7.0

wx.canvasToTempFilePath({
    fileType: 'jpg',
    canvasId: 'canvasId',
    quality:0.8,  // 设置 JPG 保存质量 80%
    success: res => { },
    fail:res => {}}, this)

官方文档地址：
https://developers.weixin.qq.com/miniprogram/dev/api/wx.canvasToTempFilePath.html?search-key=canvasToTempFilePath

如果有什么疑问或者纠错可以在下面给 智酷君 留言。

如果 智酷君 的分享能够帮助到你，或者想持续获得最新的全栈攻略

可以在 segmentfault 关注我，或在 VX 搜索“Geek_Club”或者“智酷方程式”

扫描关注公众号????????????

海报生成速度缓慢问题的优化

微信头像在 app.js 中预先加载缓存

多图片异步加载

流程中断处理

保存图片可被压缩