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

2020-07-28 15:39:47 浏览数 (1)

一、动态二维码生成

1. 库引用

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

2. 组件设置

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

3. 动态生成

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

4. 实现原理

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

二、节点截图

1. 实现原理

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

2. 组件设置

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

3. 组件使用

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

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

0 人点赞