用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序canvas生成海报优化方案

Rolan 2019-5-30 00:43

海报生成速度缓慢问题的优化微信头像在app.js中预先加载缓存多图片异步加载流程中断处理二次授权失败的处理请求或者下载图片失败处理保存图片可被压缩海报生成速度缓慢问题的优化原因分析:主要的时间消耗在于getIma ...

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

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

原因分析:

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

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

//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/组件名称终端类型微信版本触发方法
openSetting6.7.22.3.0showModal
// 关于 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 。

属性默认值说明最低版本
quality1.0图片的质量,取值范围为 (0, 1]1.7.0
wx.canvasToTempFilePath({
    fileType: 'jpg',
    canvasId: 'canvasId',
    quality:0.8,  //设置JPG保存质量 80%
    success: res => {
    
    },
    fail:res => {
    }
}, this)
复制代码

官方说明: developers.weixin.qq.com/miniprogram…

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 智酷方程式 来自: 掘金