闲来没事,发现小田田上有个分享至朋友圈的功能,点击可以生成一份带玩家信息的游戏二维码海报,下面来还原一下怎么做
先来讲一下如何生成带玩家信息的游戏二维码,在微信小游戏文档中可以找到
因为每个玩家都可能需要生成一个属于ta自己的二维码,所以我们只能选择接口B,这里是前端实现,所以,怎么生成这个二维码
就交给服务器处理了, 流程如下 --> 服务器本身存在token --> wxacode.getUnlimited 获取玩家二维码(此处需要传入需要的玩家信息)
--> 微信返回二维码数据流 --> 调用工具生成二维码 --> 发送二维码地址给小游戏前端
紧接上述此时我们已经有了二维码地址了,海报地址可以放在oss服务器上,或者自行安排,不建议放在小游戏包体中(不灵活,还占内存)
有了两个图片,那么现在如何将他们合并成一张图片
我尝试过使用直接截屏的方案,不过发现方案并不好,海报与二维码都会在主屏上闪一下,然后才能截屏
最终方案是 使用微信小游戏原生 离屏画布 然后通过 canvas.toTempFilePath 实现
下述代码是在cocosCreator中完成,脚本语言使用的是TypeScript / JavaScript , 参杂一些微信官方的搞法
//开始获取离开屏幕 codeUrl 是提前通过Https 从服务器上搞来的地址**
//开始获取离开屏幕
public SaveOffCanvas(codeUrl:string,compelete:Function)
{
// 640 1044
if(cc.sys.platform == cc.sys.WECHAT_GAME)
{
const canvas = this.api.createCanvas();
canvas.width = 640;
canvas.height = 1044;
const context = canvas.getContext('2d');
const shareBg = this.api.createImage();
shareBg.src = "your shareBg url";
shareBg.onload = ()=>
{
console.log("背景加载完毕");
context.drawImage(shareBg,0,0,canvas.width,canvas.height);
const code = this.api.createImage();
code.src = codeUrl;
code.onload = ()=>
{
console.log("code load call");
context.drawImage(code,66,838,186,186); //微信坐标系以屏幕左上角为坐标原点
checkStart();
}
}
//let dpr = cc.view.getDevicePixelRatio();
//console.log("设备DPR 值: " + dpr);
let checkStart = ()=>
{
var width = canvas.width ;
var height = canvas.height ;
console.log("保存图片大小 : " + width + " : " + height);
canvas.toTempFilePath({
success : (res)=> {
//.可以保存该截屏图片
console.log("临时文件:" + res.tempFilePath);
this.api.saveImageToPhotosAlbum({
filePath : res.tempFilePath,
success:()=>{
console.log("保存图片到相册成功");
compelete(true);
},
fail:(err)=>{
console.log("保存图片到相册失败 : " + err);
compelete(false);
}
})
}
})
}
}
}
以上就是微信小游戏朋友圈海报生成的文档了,有问题可以评论私信,看到了会解答