资讯专栏INFORMATION COLUMN

[拆弹时刻]小程序canvas生成海报(二)---优化方案

LittleLiByte / 1534人阅读

摘要:注意如果用户一开始没有微信授权,生成海报时又必须要用户头像不能使用默认的话,那就只能老老实实走之前的流程了。组件名称终端类型微信版本触发方法关于的调用方法相册权限需要你提供保存相册权限获取相册权限成功,给出再次点击图片保存到相册的提示。


海报生成示例

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

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

多图片异步加载

流程中断处理

二次授权失败的处理

请求或者下载图片失败处理

保存图片可被压缩

### [代码片段]Canvas生成海报实战demo

demo的微信路径:https://developers.weixin.qq....

demo的ID:Q74OU3m57c9x

如果你装了IDE工具,可以直接访问上面的demo路径

通过代码片段将demo的ID输入进去也可添加:

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

原因分析:
主要的时间消耗在于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/组件名称 终端类型 微信版本 触发方法
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 ”或者“ 智酷方程式

扫描关注公众号

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104302.html

相关文章

  • [填坑手册]程序目录结构和component组件使用心得

    摘要:组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。事件用于子组件向父组件传递数据,可以传递任意数据。官方文档往期回顾填坑手册小程序生成海报一拆弹时刻小程序生成海报二 showImg(https://user-gold-cdn.xitu.io/2019/6/19/16b6e94bcde767a1?w=1069&h=652&f=jpeg&s=120912); 小程序目录结构...

    myshell 评论0 收藏0
  • [打怪升级]程序评论回复和发贴功能实战(一)

    摘要:往期回顾打怪升级小程序评论回复和发贴功能实战二填坑手册小程序生成海报一拆弹时刻小程序生成海报二填坑手册小程序目录结构和组件使用心得 showImg(https://segmentfault.com/img/remote/1460000019733090?w=818&h=516); 在学习成长的过程中,常常会遇到一些自己从未接触的事物,这就好比是打怪升级,每次打倒一只怪,都会获得经验,让...

    YJNldm 评论0 收藏0
  • [打怪升级]程序评论回复和发帖功能实战(

    摘要:发帖的功能只要理清思路,其实并不复杂,利用机器做内容审查是关键,直接关系到小程序的整体安全。内容检查重点由于内容安全对于小程序运营至关重要,稍有不慎就容易导致小程序被封,所以在这块的校验除了常规人工检查外,我们还可以用到微信的内容安全。 showImg(https://segmentfault.com/img/remote/1460000019955210?w=658&h=440); ...

    ThinkSNS 评论0 收藏0
  • Canvas绘图在微信程序中的应用:生成个性化海报

    摘要:解析进到首页其实关键字在本地就随机取完了,在首页中的方法中就通过缓存了要画的元素,比如关键字这里是图片关键字解析语也是图片毕竟微信小程序的不支持字体等等。 一、Canvas应用的背景(个人理解)及基础语法 背景 从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样的新媒体盛行。企业的广告投入开始...

    vpants 评论0 收藏0
  • 程序如何生成海报分享朋友圈

    摘要:项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。需求利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。摘要: 小程序开发必备技能啊... 原文:小程序如何生成海报分享朋友圈 作者:小白 Fundebug经授权转载,版权归原作者所有。 项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优...

    lemon 评论0 收藏0

发表评论

0条评论

LittleLiByte

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<