美文网首页
cocos creator H5截图和下载的实现

cocos creator H5截图和下载的实现

作者: cmd_ts | 来源:发表于2020-04-07 13:48 被阅读0次

    typescript 2.3.2版本。
    在web中可以下载,但是集成到app里的webview实现不了。

    onLoad () {
            if(cc.sys.isBrowser)
            {  
                let node = new cc.Node();
                node.parent = cc.director.getScene().getChildByName('Canvas');
                let camera = node.addComponent(cc.Camera);
                //设置相机参数
               
                camera.enabled = false; // 避免自动渲染
                // 截图的缩放比例       
                let zoom = 1;
                let width = cc.winSize.width;  
                let height = cc.winSize.height; 
                let size = cc.size(width*zoom, height*zoom);
    
                // 截图的中心点就是摄像机节点的位置
                let origin = cc.v2(0, 0);
                
                camera.zoomRatio = zoom; // 设置缩放
    
                // 设置目标渲染纹理
                let texture = new cc.RenderTexture();
                texture.initWithSize(size.width, size.height);  // 截图矩形的尺寸
                this.node.setPosition(origin);                  // 截图矩形的中心点
    
                camera.targetTexture = texture;
    
                // 缓存,备用
                this._camera = camera;
                this._texture = texture;
                
                //用于显示的sprite组件,如果要测试这个,需要添加sprite组件
                this._sprite = this.getComponent<cc.Sprite>(cc.Sprite);
            }
        }
        
    btn_image_knife(){
            console.log('save');
            
           // 执行一次 render,将所渲染的内容渲染到纹理上
           this._camera.render(undefined);
           // 到这里,截图就已经完成了
    
            // 接下去,可以从 RenderTexture 中获取数据,进行深加工
            let texture = this._texture;
            let data = texture.readPixels();
    
            let width = texture.width;
            let height = texture.height;
    
            // 接下来就可以对这些数据进行操作了       
            // let canvas:HTMLCanvasElement;
            let canvas = document.createElement('canvas'); 
            // document.body.appendChild(btn); // 没有添加到body上,不用担心内存泄漏
    
            let ctx = canvas.getContext('2d');
            canvas.width = width;
            canvas.height = height;
    
            // 1维数组转2维
            // 同时做个上下翻转
            let rowBytes = width * 4;
            for (let row = 0; row < height; row++) {
                let srow = height - 1 - row;
                let imageData = ctx.createImageData(width, 1);
                let start = srow*width*4;
                for (let i = 0; i < rowBytes; i++) {
                    imageData.data[i] = data[start+i];
                }
    
                ctx.putImageData(imageData, 0, row);
            }
    
            let dataUrl = canvas.toDataURL("image/jpeg");
    
            //把图片生成后download到本地
            
            var href = dataUrl.replace(/^data:image[^;]*/, "data:image/octet-stream");
            //document.location.href = href;
    
            var a = document.createElement('a');          // 创建一个a节点插入的document
            a.href = href; 
            a.download = 'asd.png';
            a.click();
            a.remove();
        }
    

    相关文章

      网友评论

          本文标题:cocos creator H5截图和下载的实现

          本文链接:https://www.haomeiwen.com/subject/vkzgphtx.html