cocoscreator实现微信内置浏览器点击图片识别图中二维码

最近在做一个微信内置浏览器的小游戏，小游戏中有一个二维码，需要用户点击长按二维码弹出系统识别二维码按钮。
下面是解决步骤：

1、cocoscreator是如何实现在浏览器中渲染游戏画面的

看图中箭头处，一个是div标签中有一个canvas标签，从id上可以看出来，div是游戏容器，canvas是游戏的渲染层，游戏是通过canvas来渲染出来的，你在js代码中所有的操作，都是在这个canvas中完成的，整个游戏就一个html。

2、微信中点击图片之后弹出系统识别二维码按钮需要自己实现吗

完全不需要自己实现，这里有一个非常重要的知识点，就是在微信内置浏览器中，使用img标签生成的图片长按就会弹出系统菜单，菜单里有：存储图片按钮，取消按钮，如果图片中有二维码，还会有识别二维码按钮。这个识别二维码按钮是我们需要的按钮，所以其他按钮就不解释了。由此推理，只要在把游戏中的二维码图片用img标签加载出来就OK了。

3、如何在cocoscreator的js代码中实现加载img标签

img标签是不能加载在canvas上的，所以我们加到div上。如果不设置img标签的位置，默认会排在canvas下面，我们需要img标签显示在canvas上层，所以要设置一下img标签的位置。
下面是实现代码：

var url = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png';//要显示的图片url地址var gameDiv = document.getElementById('Cocos2dGameContainer');//获取div元素var bigImg = document.createElement("img");//创建img元素bigImg.id = 'QRCode';bigImg.src = url;//给img标签添加图片源bigImg.alt = 'bigImg';bigImg.width = 150;bigImg.height = 150;bigImg.style.position = 'absolute';bigImg.style.top = "70px";//y坐标bigImg.style.left = parseInt(gameDiv.style.width.replace(/px/, '')) / 2 - bigImg.width / 2 + "px";//设置图片居中显示gameDiv.appendChild(bigImg);      //为div添加子元素img

以上代码就完成了img标签的添加。div的原点在左上角，向下，向右为正方向，所以设置图片位置的时候要注意一下。

注意

1、ios版微信长按图片会直接弹出识别图中二维码按钮；
2、android版微信长按图片会先弹出保存图片按钮，过大概1s又追加了识别图中二维码按钮；
3、使用完图片之后切到别的游戏画面时一定要及时移除img标签，因为img标签是我们手动添加到div上的，img标签不受canvas渲染的控制，只能手动移除（通过id获取到img元素，调用remove()方法即可移除）；
4、img的style的top等参数一定要带上px，否则在构建之后不生效（被这个问题坑了一晚上）。

如果有什么疑问或者想法，欢迎留言，靴靴！