實現微信小遊戲的截圖，預覽和相冊保存功能
在遊戲中添加一個拍照按鈕不僅是爲了截圖方便，更重要的是爲了分享裂變。現在讓我們來看下如何實現截圖，預覽和保存到相冊這三個功能。
運行效果如下：
Cocos Creator版本：2.2.2
後臺回覆"截圖預覽"，獲取該項目完整文件：
節點介紹
1. bg就是背景節點。
2. photo btn是一個按鈕類型節點，用於拍照截圖。
3. preview是一個Sprite類型節點，用於預覽照片，默認是隱藏狀態，該節點的大小即爲預覽時圖片的大小。
4. 預覽時，preview節點爲顯示狀態，而下面的close btn子節點就用來隱藏preview節點。
接着我們在資源管理器中創建一個ScreenShot.js腳本，並掛到Canvas節點上。
現在開始編寫代碼。
截圖
我們只需要調用canvas.toTempFilePath或者canvas.toTemFilePathSync接口就可以輕鬆實現截圖功能，後者是前者的同步版本。
微信開發文檔上已經詳細給出了該接口的參數信息，我們只需要修改x，y，width和height這幾個參數的值，就可以截取屏幕上任意大小區域：
編寫一個takePhoto方法，代碼如下：
// ScreenShot.js
takePhoto() {
if (typeof wx === 'undefined') {
return;
}
cc.audioEngine.playEffect(this.photoAudio, false);
// 獲取當前屏幕截圖，參數請參照文檔自己設置
let tempFilePath = canvas.toTempFilePathSync({
x: 0,
y: 0,
fileType: 'jpg',
quality: '1'
});
}
1. 筆者這裏使用了同步版本。
2. width和height都沒有設置，使用默認值，也就是說截取全屏。
3. 修改fileType和quality參數可以減少截取圖片的大小。
就這麼簡單，現在你已經有了截取圖片的路徑tempFilePath，可以拿來爲所欲爲，比如用來預覽，保存到相冊和分享。
注：takePhoto爲photo btn按鈕的事件函數。
預覽
在properties中添加一個previewSprite屬性(就是用來拖入preview節點的)：
// ScreenShot.js
properties: {
previewSprite: cc.Sprite, // 預覽節點
photoAudio: { // 拍照音頻
default: null,
type: cc.AudioClip
}
},
添加如下預覽代碼：
// ScreenShot.js
takePhoto() {
if (typeof wx === 'undefined') {
return;
}
cc.audioEngine.playEffect(this.photoAudio, false);
...
// 預覽
var self = this;
let url = this.tempFilePath;
cc.loader.load({url: url, type: 'jpg'}, function(err,img){
self.previewSprite.spriteFrame = new cc.SpriteFrame(img);
self.previewSprite.node.active = true;
});
}
也很簡單，就是用動態加載的方式將圖片顯示到preview節點上。
關於動態加載資源的解釋，請大家直接移步官方文檔。
預覽顯示成功了的話，我們其實還可以發起分享對吧。所以大家可以加一個按鈕用來發起主動轉發，其中imageUrl的值就是tempFilePath變量的值。關於好友分享內容，大家可以去閱讀實現微信小遊戲好友分享功能。
關閉預覽按鈕的事件函數編寫如下：
// ScreenShot.js
closeBtn () {
this.previewSprite.node.active = false;
}
保存到相冊
只需調用wx.saveImageToPhotosAlbum這個API就可以實現相冊保存功能。不過在調用這個API之前，我們必須確保已經獲得了相冊寫入的權限。
在takePhoto方法中添加如下代碼：
// ScreenShot.js
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接口提示玩家圖片已成功保存到相冊中。
注：在微信開發者工具上無法正常顯示截取的圖片，手機上測試正常。
好那麼本節教程就到這，希望大家有所收穫啦。