web 平台二维码自动生成及节点截图!

一、动态二维码生成


1. 库引用

    主要使用到 qrcode 库,分享的工程内已经有了,作为插件导入到新工程内即可。

2. 组件设置

    创建个空节点,设置好二维码显示的长宽,挂载 QRcode 组件和 Graphics 组件,把节点的锚点设置成 (0, 0)。

3. 动态生成

    需要动态生成时,调用 QRcode 组件的 makeCode 方法,传入需要动态生成的字符串,二维码将会显示在上一步添加的节点上。

   

4. 实现原理

    获取到二维码数据,根据节点的宽高,使用 Graphics 在节点区域内画出二维码。

二、节点截图


1. 实现原理    

    获取节点上的像素数据,新加一个 canvas,把节点及其子节点上所有的像素数据绘制到 canvas 上,通过 canvas 获取图片的 base64 数据。

2. 组件设置

    添加个独立相机,专门针对需要截图的节点进行使用,把 Capture 组件添加到需要截图的节点上,相机关联到 Capture 组件上,这个可以避免有透明边沿的图截图出来把后面的像素数据也读出来了。

3. 组件使用

    需要给节点截图,直接调用 Capture 组件的 capture 方法,就可以获取到图片的 base64 数据。

    返回的数据,大概就是下面这个样子。

三、获取源码


关注公众号,发送【截屏二维码】获取源码,扫码关注,获取更多分享!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值