cocos creator H5截图和下载的实现

2020-04-07  本文已影响0人  cmd_ts

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();
    }
上一篇下一篇

猜你喜欢

热点阅读