摘要：注意如果用戶一開始沒有微信授權(quán)，生成海報(bào)時(shí)又必須要用戶頭像不能使用默認(rèn)的話，那就只能老老實(shí)實(shí)走之前的流程了。組件名稱終端類型微信版本觸發(fā)方法關(guān)于的調(diào)用方法相冊權(quán)限需要你提供保存相冊權(quán)限獲取相冊權(quán)限成功，給出再次點(diǎn)擊圖片保存到相冊的提示。

海報(bào)生成示例

海報(bào)生成速度緩慢問題的優(yōu)化

微信頭像在app.js中預(yù)先加載緩存

多圖片異步加載

流程中斷處理

二次授權(quán)失敗的處理

請求或者下載圖片失敗處理

保存圖片可被壓縮

### [代碼片段]Canvas生成海報(bào)實(shí)戰(zhàn)demo

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

demo的ID：Q74OU3m57c9x

如果你裝了IDE工具，可以直接訪問上面的demo路徑

通過代碼片段將demo的ID輸入進(jìn)去也可添加：

原因分析：
主要的時(shí)間消耗在于getImageInfo網(wǎng)絡(luò)請求獲取頭像和下載圖片獲得臨時(shí)地址的過程，可以看到海報(bào)中有3張圖片（微信頭像、主圖、動態(tài)二維碼（對應(yīng)不同新聞的ID））需要下載，接下來主要就是對這3張圖的優(yōu)化

//app.js
//可以在app.js中使用小程序默認(rèn)的全局變量，將頭像在加載的時(shí)候預(yù)先緩存
App({
    onLaunch: function () {
        // 獲取用戶信息
        wx.getSetting({
            success: res => {
                if (res.authSetting["scope.userInfo"]) {
                    // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會彈框
                    wx.getUserInfo({
                        success: res => {
                            this.globalData.userInfo = res.userInfo;
                            //從返回值中獲取微信頭像地址
                            let WxHeader = res.userInfo.avatarUrl;  
                            wx.getImageInfo({
                                src: WxHeader,//下載微信頭像獲得臨時(shí)地址
                                success: res => {
                                    //將頭像緩存在全局變量里
                                    this.globalData.avatarUrlTempPath = res.path;
                                },
                                fail: res => {
                                    //失敗回調(diào)
                                }
                            });
                        }
                    })
                }
            }
        })
    },
    globalData: {
        userInfo: null,
        //如果用戶沒有授權(quán)，無法在加載小程序的時(shí)候獲取頭像，就使用默認(rèn)頭像
        avatarUrlTempPath: "./images/defaultHeader.jpg"
    }
})

大致思路是： 加載App.js的時(shí)候
==> getSetting(判斷是否授權(quán))
==> getUserInfo（獲取頭像）
==> getImageInfo（生成臨時(shí)地址）
將需要的網(wǎng)絡(luò)請求在加載小程序的時(shí)候就異步完成，提前將臨時(shí)地址緩存在全局變量globalData中，這樣當(dāng)用戶進(jìn)入新聞頁面，點(diǎn)擊生成海報(bào)的時(shí)候就不需要在請求微信頭像，縮短了不少時(shí)間。
注意： 如果用戶一開始沒有微信授權(quán)，生成海報(bào)時(shí)又必須要用戶頭像不能使用默認(rèn)的話，那就只能老老實(shí)實(shí)走之前的流程了。

let num = 0; //下載圖片計(jì)數(shù)器，假設(shè)一共三張圖片
//下載圖片1
wx.getImageInfo({
    src: image_1,
    success: function (res) {
        //判斷是否是最后一張圖
        if (num >= 2) {
            console.log("圖片全部下載完畢，可以繪制海報(bào)")
        } else {
            //如果不是最后一張圖則+1，繼續(xù)
            num++;
        }
    },
    fail: function (res) {
        //失敗回調(diào)
    }
});
//下載圖片2
wx.getImageInfo({
    src: image_2,
    success: function (res) {
        //判斷是否是最后一張圖
        if (num >= 2) {
            console.log("圖片全部下載完畢，可以繪制海報(bào)")
        } else {
            //如果不是最后一張圖則+1，繼續(xù)
            num++;
        }
    }
});
......

這里智庫君一開始是使用promise的同步辦法，但是發(fā)現(xiàn)3張圖片阻塞嚴(yán)重，如果一張圖片下載過慢，就會影響整個(gè)海報(bào)生成時(shí)間，所以可以改為添加計(jì)數(shù)器判斷的異步方法。
當(dāng)海報(bào)生成需要多張圖片的時(shí)候，完全可以異步的方式加載他們，通過計(jì)數(shù)器判斷是否是最后一張。

從圖中可以看出，整個(gè)海報(bào)生成過程有二次授權(quán)：用戶信息授權(quán)獲取頭像和保存相冊授權(quán)，非常可能因?yàn)橛脩舻恼`點(diǎn)或者拒絕而導(dǎo)致流程中斷。

主要分為二種情況：

需要的圖片沒有拿到，我們可以采取使用默認(rèn)圖片的方式替代。

保存相冊授權(quán)被拒絕，我們可以提示用戶“截圖保存”，由于當(dāng)前版本6.7.2+的wx.openSetting()被限制（無法直接被調(diào)用），如果必須要相冊權(quán)限，我們可以通過showModal觸發(fā)。

// 關(guān)于 openSetting 的調(diào)用方法
wx.showModal({
    title: "相冊權(quán)限",
    content: "需要你提供保存相冊權(quán)限",
    success: function (res) {
        if (res.confirm) {
            wx.openSetting({
                success(settingdata) {
                    console.log(settingdata)
                    if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                        console.log("獲取 相冊 權(quán)限成功，給出再次點(diǎn)擊圖片保存到相冊的提示。");
                    } else {
                        console.log("獲取 相冊 權(quán)限失敗，給出不給權(quán)限就無法正常使用的提示")
                    }
                }
            })
        }
    }
})

//獲取相冊權(quán)限的流程處理
wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,  //canvasToTempFilePath API生成的臨時(shí)地址
    success: function (data) {
        console.log("提示圖片保存成功");
    },
    fail: function (err) {
        console.log(err);
        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            console.log("當(dāng)初用戶拒絕，再次發(fā)起授權(quán)")
            //調(diào)用上面說到的方法  wx.openSetting
        } else {
            console.log("提示：請截屏保存分享");
        }
    },
    complete(res) {
        console.log(res);
    }
})

小程序官方提供了一個(gè)API可以設(shè)置用戶保存圖片的質(zhì)量，僅針對JPG。

wx.canvasToTempFilePath({
    fileType: "jpg",
    canvasId: "canvasId",
    quality:0.8,  //設(shè)置JPG保存質(zhì)量 80%
    success: res => {
    
    },
    fail:res => {
    }
}, this)

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

如果有什么疑問或者糾錯(cuò)可以在下面給智酷君留言。

如果智酷君的分享能夠幫助到你，或者想持續(xù)獲得最新的全棧攻略

可以在segmentfault關(guān)注我，或在VX搜索“ Geek_Club ”或者“ 智酷方程式 ”

掃描關(guān)注公眾號