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

一、动态二维码生成


1. 库引用

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

web 平台二维码自动生成及节点截图!_第1张图片

2. 组件设置

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

web 平台二维码自动生成及节点截图!_第2张图片

3. 动态生成

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

web 平台二维码自动生成及节点截图!_第3张图片   web 平台二维码自动生成及节点截图!_第4张图片

4. 实现原理

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

web 平台二维码自动生成及节点截图!_第5张图片

二、节点截图


1. 实现原理    

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

web 平台二维码自动生成及节点截图!_第6张图片

2. 组件设置

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

web 平台二维码自动生成及节点截图!_第7张图片

3. 组件使用

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

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

web 平台二维码自动生成及节点截图!_第8张图片

三、获取源码


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

你可能感兴趣的:(web 平台二维码自动生成及节点截图!)