[cocos-js] web平台微信截屏分享

操作原理：客户端通过canvs把当前画布上的节点，转成对应base64数据，通过数据创建html元素image，在微信浏览器里长按image触发操作菜单栏执行分享。

（流程直接上代码说名）

1.首先是通过canvas的toDataURL获取base64的数据（这里有一个重点：必须在渲染完城后才能去获取base64数据，直接调用接口的，如果渲染数据太大，获取到的数据是黑屏）所以这里我们通过监听cocos渲染之后的回调cc.Director.EVENT_AFTER_DRAW，在这个回调里面去获取base64数据，然后去掉监听。

//截图分享
    showScreenshot: function() {
        cc.eventManager.addCustomListener(cc.Director.EVENT_AFTER_DRAW, function(event) {
            var canvas = document.getElementById("gameCanvas");
            var base64 = canvas.toDataURL("imagea/png");
            cc.eventManager.removeCustomListeners(cc.Director.EVENT_AFTER_DRAW);
            this._saveCancas(base64);
        }.bind(this));
    },

2.设计截屏尺寸（按自己需求修改）

//获取截图比例
    _getShotScale: function(){
        var vsbSize = cc.view.getVisibleSize();
        var designSize = cc.director.getVisibleSize();
        var scaleW = vsbSize.width / designSize.width;
        var scaleH = vsbSize.height / designSize.height;
        return Math.max(scaleW, scaleH) * 0.85;//原图的85%
    },

3.创建对应截图（这里需要注意div 的overflow 属性一定不能是“hidden”，不然可能看不到截图）

 //保存截图
    _saveCancas : function(webImgData){
        var fitScale = this._getShotScale();
        var gameDiv = document.getElementById('Cocos2dGameContainer');
        var bigImg = document.createElement("img");
        gameDiv.style.overflow = "auto";//修改div设置（超出不隐藏）
        bigImg.id = 'screenshot';
        bigImg.src = webImgData;
        bigImg.alt = "bigImg";
        bigImg.width = parseInt(gameDiv.style.width.replace(/px/,'')) * fitScale;
        bigImg.height = parseInt(gameDiv.style.height.replace(/px/,'')) * fitScale;
        bigImg.style.position = 'absolute';
        bigImg.style.top = "0px";
        bigImg.style.left = parseInt(gameDiv.style.width.replace(/px/, '')) /2 - bigImg.width / 2 + "px";
        gameDiv.appendChild(bigImg);
    },

到此功能已经实现。加个后续操作（按个人所需参考），这里我是在iamge下层创建一个遮罩，添加操作提示

4.遮罩、操作提示

//截图提示
    _showShotTipLayer: function(gameDiv){
        var curScene = cc.director.getRunningScene();
        var designSize = cc.director.getVisibleSize();

        var shotTipLayer = new cc.LayerColor(cc.color(0, 0, 0, 200), designSize.width, designSize.height)
            .addToEx(curScene, 9999999,"shotTipLayer")
            .anchorEx(Layout.center)
            .layoutEx(Layout.center)
            .enableTouchEvent(true, function()
            {
                //删除截图
                var image = document.getElementById("screenshot");
                image.parentNode.removeChild(image);
                //还原div设置
                gameDiv.style.overflow = "hidden";
                //删除遮罩
                shotTipLayer.removeFromParentAndCleanup(true);
            });

        shotTipLayer.ignoreAnchorPointForPosition(false);
        //添加提示语
        var tipMsg = cc.LabelTTF.create("长按图片进行分享，点击空白区域取消分享", "Arial", 40);
        tipMsg.setPosition(cc.p(designSize.width/2, 35));
        tipMsg.setAnchorPoint(cc.p(0.5, 0));
        shotTipLayer.addChild(tipMsg, 0, "tipMsg");
    },

tip的坐标要自己动态计算，这里我就直接选取一个位置加上。