第十二節 實現截圖和保存到相冊功能
在這一小節中，我們將通過調用微信小遊戲API來給俄羅斯方塊這個遊戲加上截圖和保存到相冊這兩個功能。
如果大家還需要實現截圖後的預覽功能的話，可以去看下筆者的這一篇教程。
新建節點
首先在層級管理器中新建一個按鈕節點，命名爲camera：
添加按鈕背景圖片後，使用Widget組件進行佈局：
截圖功能
我們只需要調用canvas.toTempFilePath或者canvas.toTemFilePathSync接口就可以輕鬆實現截圖功能，後者是前者的同步版本。
微信開發文檔上已經詳細給出了該接口的參數信息，我們只需要修改x，y，width和height這幾個參數的值，就可以截取屏幕上任意大小區域：
現在我們在資源管理器中新建一個ScreenShot.js腳本，將其掛載到camera按鈕上：
編寫一個takePhoto方法：
takePhoto() {
if (typeof wx === 'undefined') {
return;
}
// 獲取當前屏幕截圖，參數請參照文檔自己設置
let tempFilePath = canvas.toTempFilePathSync({
x: 0,
y: 0,
fileType: 'jpg',
quality: '1'
});
}
1. 筆者這裏使用了同步版本。
2. width和height都沒有設置，使用默認值，也就是說截取全屏。
3. 修改fileType和quality參數可以減少截取圖片的大小。
就這麼簡單，現在你已經有了截取圖片的路徑tempFilePath，你可以使用該變量將圖片以一定的形式顯示到遊戲屏幕上(比如說放在一個相框裏)。或者就拿來傳給保存到相冊的接口中。
保存到相冊
實現保存到相冊這一功能也很簡單，只需調用wx.saveImageToPhotosAlbum這個API就行了。不過在調用這個API之前，我們必須確保已經獲得了相冊寫入的權限。
在takePhoto方法中添加如下代碼：
takePhoto() {
...
wx.authorize({
scope: 'scope.writePhotosAlbum', // 需要獲取相冊權限
success: (res)=>{
// 將截圖保存到相冊中
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: (res)=>{
wx.showToast({
title: '圖片保存成功',
icon: 'success',
duration: 2000
});
},
fail: (res)=>{
console.log(res);
console.log('圖片保存失敗');
}
});
},
fail: (res)=>{
console.log('授權失敗');
}
});
}
1. 我們首先調用wx.authorize接口來獲取相冊寫入權限，scope值爲'scope.writePhotosAlbum'。
2. 如果權限獲取成功，則調用wx.saveImageToPhotosAlbum將截取過來的圖片保存到相冊中。
3. 如果保存成功，那麼我們使用wx.showToast接口提示玩家圖片已成功保存到相冊中。
圖片保存成功了的話，我們其實還可以發起分享對吧。所以可以直接在wx.showToast後面加一個wx.shareAppMessage發起主動轉發(當然最好讓用戶決定是否分享)，其中imageUrl的值就是tempFilePath變量的值。關於好友分享內容，大家可以去閱讀第七節。
下面是保存到手機後的截圖：
