实现微信小游戏的截图，预览和相册保存功能
在游戏中添加一个拍照按钮不仅是为了截图方便，更重要的是为了分享裂变。现在让我们来看下如何实现截图，预览和保存到相册这三个功能。
运行效果如下：
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接口提示玩家图片已成功保存到相册中。
注：在微信开发者工具上无法正常显示截取的图片，手机上测试正常。
好那么本节教程就到这，希望大家有所收获啦。