微信全景结合二维码识别

krpano制作的全景在国内应用最多的场景就是在微信上展示。因为微信与微信公众号有着密不可分的关系,客户希望在展示全景的同时也希望用户能够关注其公众号。关注公众号的办法很多,其中一种就是在微信中长按二维码进行识别,然后跳转到其公众号页面中。

因此以下都是按照HTML5的情况进行讲解:

如果我们在krpano使用layer的方式弹出二维码图片,无论怎么长按都是识别不了。因为layer这个代码不是在html里的,严格来说,它是在krpano内核js或者swf中的一个方法应用。

但如果是普通的html页面放个img标签的二维码是可以正常在微信的浏览器识别的。于是按照这个思路,决定做个div将img标签放在其中,也就是在html文件中。

也就是我们有一个按钮实现了html中img标签的图片的弹出。但在测试时发现虽然html的按钮是可以显示在全景上面,但长按的时候还是无法识别二维码。这是怎么回事呢?

于是尝试着把全景这个div删除掉,发现长按是可以识别二维码的。原来如此,在全景这个div显示的情况下是识别不了的。但我们不可能真的删掉全景这个div,我们可以用隐藏div的方法。也就是在主xml中这样写:

counttext是一个按钮(layer),实现弹出二维码的功能。实际上你只需要

qrcode和qrcode2对两个div对象进行了隐藏和显示。在显示二维码的时候就隐藏pano,在关闭二维码时就显示pano。

因为pano层是webg层,唯一还需要隐藏的是文字textfield的layer,因此我们做了一个循环来设置文字层的隐藏和显示。

 

下面是html的代码部分。注意只需要确定二维码一开始是隐藏的。

pano和dingwei两个div就是我们在xml操作的对象。注意xml中jscall仅适用于krpano 1.19,其它版本可以直接使用js,然后调用html中的function

具体效果请复制以下链接

http://krpano360.com/wp-content/uploads/krpano/qrcode25/tour.html