美文网首页
微信小游戏生成带玩家信息的朋友圈海报

微信小游戏生成带玩家信息的朋友圈海报

作者: Jaymz_2b11 | 来源:发表于2019-08-20 15:49 被阅读0次

闲来没事,发现小田田上有个分享至朋友圈的功能,点击可以生成一份带玩家信息的游戏二维码海报,下面来还原一下怎么做

先来讲一下如何生成带玩家信息的游戏二维码,在微信小游戏文档中可以找到

微信官方文档

因为每个玩家都可能需要生成一个属于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);
                                }
                            })
                        }
                    })
               }
           }
       }


以上就是微信小游戏朋友圈海报生成的文档了,有问题可以评论私信,看到了会解答

相关文章

  • 微信小游戏生成带玩家信息的朋友圈海报

    闲来没事,发现小田田上有个分享至朋友圈的功能,点击可以生成一份带玩家信息的游戏二维码海报,下面来还原一下怎么做 先...

  • canvas 图片跨域 +海报生成+二维码

    在项目中,需要生成海报。有动态信息(微信头像、微信昵称、上传图片(oss链接)、二维码)+ 海报背景图生成一张海报...

  • Creator 原生无感截图

    接到需求,需要在原生中生成带二维码的海报,于是有了这篇记录原生中不像微信小游戏那样,有离屏画布,所以必须要采用其他...

  • 微信小游戏获取玩家信息

    微信获取玩家信息(头像,名称等等)又双叒叕改了 老流程,获取授权情况,没授权跳转设置界面的那套已经废了 新流程如下...

  • [h5]自定义海报生成

    功能需求:获取海报参数自定义生成一张带二维码海报。 元素:主要分成背景图,用户信息和带用户信息的二维码(由前端生成...

  • html2canvas截图相关的问题

    真几把坑 需求 微信端的H5活动 获取到用户头像 生成关注公众号使用的带参数的二维码 通过答题生成一张海报,海报长...

  • 原来微信《跳一跳》也可以用Python玩~

    微信更新的 6.6.1 版本突然也开放了小游戏,微信启动页面还重点推荐了小游戏「跳一跳」。 跳一跳 玩家需要「按住...

  • 小程序用canvas生成海报(带参数小程序码)

    微信小程序canvas生成海报带参数小程序码 canvas基本绘图其实是很简单的。不少人写海报的插件,写的一大堆,...

  • 微信小程序生成清晰海报

    海报生成具体逻辑请查看文章 微信小程序生成分享海报(附带二维码生成) 今天我们主要说的是海报清晰度的问题在之前的文...

  • 最优雅的实现微信小程序海报功能解决方案

    前言 最近一直在接微信小程序的需求,其中生成微信海报功能简直让人头秃。 微信原生使用canvas绘制海报功能会遇到...

网友评论

      本文标题:微信小游戏生成带玩家信息的朋友圈海报

      本文链接:https://www.haomeiwen.com/subject/lzupsctx.html