[拆彈時刻]小程序canvas生成海報（二）---優化方案

海報生成示例

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

  • 微信頭像在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 」或者「 智酷方程式 」

掃描關注公衆號👇👇👇