用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

2012湖人vs雷霆季后赛:小程序canvas生成海報優化方案

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-5-30 00:43

海報生成速度緩慢問題的優化微信頭像在app.js中預先加載緩存多圖片異步加載流程中斷處理二次授權失敗的處理請求或者下載圖片失敗處理保存圖片可被壓縮海報生成速度緩慢問題的優化原因分析:主要的時間消耗在于getIma ...

  • 海報生成速度緩慢問題的優化
    • 微信頭像在app.js中預先加載緩存
    • 多圖片異步加載
  • 流程中斷處理
    • 二次授權失敗的處理
    • 請求或者下載圖片失敗處理
  • 保存圖片可被壓縮

海報生成速度緩慢問題的優化

原因分析:

主要的時間消耗在于 getImageInfo 網絡請求獲取頭像和 下載圖片 獲得臨時地址的過程,可以看到海報中有3張圖片(微信頭像、主圖、動態二維碼(對應不同新聞的ID))需要下載,接下來主要就是對這3張圖的優化

微信頭像在app.js中預先加載緩存

//app.js
//可以在app.js中使用湖人vs爵士季后赛默認的全局變量,將頭像在加載的時候預先緩存
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空間
收藏
原作者: 智酷方程式 來自: 掘金