cocoscreator截屏分享

cocoscreator截屏分享

背景

公司是做电商的，新年将近，运营部预模仿某宝集福卡模式出一款集福卡小游戏，由H5游戏开发人员(也就是本人)完成并提
供游戏入口链接交由运营人员配置。其中不免会涉及到分享功能，链接分享和海报分享。由于公司之前没有往app中内嵌过
H5类型小游戏，原生这边留下的图片分享是针对于H5网页的，我这边在接入截屏分享的时候则出现了白屏的情况，界面上的图像和文字资源没有截取到一点(除了调试模式下的那个VConsole绿色标志和标题)。经过两天的论坛摸索，发现原生那边的方法在截取屏幕元素时，只能截取浏览器canvas画布上的直接子元素，而通过引擎制作的各种画面元素则无法获得(原因未知)。知道了问题源头，找到如下解决方法。

解决方法

在creator构建发布后的入口index.html文件中加入如下子元素：

并在下方的function方法中隐藏该节点：

document.getElementById('shareDiv').style.display = 'none';

截图如下：

截图方法：

/**
     * 截屏
     * @param {*摄像机 cc.Camera类型} camera 
     */
    screenShot(camera){
        let canvas = null;
        //第一步------>给摄像机指定渲染目标 不直接渲染到屏幕上
        let texture = new cc.RenderTexture();
        texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height, cc.gfx.RB_FMT_S8);
        camera.targetTexture = texture;
        //第二步----->创建并渲染画布
        let width = texture.width;
        let height = texture.height;
        if(canvas == null){
            //创建canvas
            canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
        }else{
            //清理画布上指定矩形区域内的像素
            canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
        }
        //返回值 ctx 一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。
        let ctx = canvas.getContext('2d');
        //手动渲染一次摄像机
        camera.render();
        //readPixels 方法 从 render texture 读取像素数据
        let data = texture.readPixels();
        //把从摄像机读取的像素 渲染到canvas画布上去
        let rowBytes = width * 4; 
        for (let row = 0; row < height; row++) {
            let srow = height - 1 - row;
            let imageData = ctx.createImageData(width, 1);//创建新的空白 ImageData 对象
            let start = srow * width * 4;
            for (let i = 0; i < rowBytes; i++) {
                imageData.data[i] = data[start + i];
            }

            ctx.putImageData(imageData, 0, row);//将图像数据拷贝回画布上
        }
        //第三步------>把画布显示在屏幕上
        document.getElementById('shareDiv').style.display = 'block';
        let shareImg = document.getElementById('shareImg');
        shareImg.style.width = '100vw';
        shareImg.style.height = '100vh';
        //toDataURL 方法 将当前画布的内容作为图像返回
        let dataURL = canvas.toDataURL('image/png');
        shareImg.src = dataURL;
        // console.log('shareImg==>', shareImg);
    },

分享后回调一定要有这一句代码：

//隐藏截屏图片
document.getElementById('shareDiv').style.display = 'none';

备注：
这个解决方法大体思想是，在要截屏的节点下面添加一个摄像机组件，要截屏的时候摄像机手动渲染一次，然后把摄取到的像素信息提取出来放入到shareImg元素中再调用原生的截屏方法去截取捕获屏幕信息，截屏分享结束后再把shareImg元素隐藏起来即可。当然，每个人遇到的情况都不一样，希望该文档对你有那么一丢丢的启发，文章内的错误理解之处欢迎指出。