h5 截图 截图部分区域 是白色 是 引擎的bug 原因是 mask 组件 导致,引擎的bug

https://xmanyou.com/cocos-creator-jie-tu-gong-neng-dai-ma/ 我参照这个代码写的 ,界面切换几次 跳入其他界面 截图就有部分地方变白了

这是截好的图 咋就变白了这个是游戏里的图

感觉和这个一样的bug引起的

我是浏览器截图,必现的

官方范例里面有截图功能,在 07_capture_texture,你能试试?

我去掉mask 就好了

有空可否给个 demo,我们分析下

@property(cc.Node)
public closeBtn:cc.Node=null;

// LIFE-CYCLE CALLBACKS:
_camera:cc.Camera;
_texture:cc.RenderTexture;

// 初始化
onLoad () {
    
    // 设置相机参数
    let camera = GameApp.Instance.UICamera;
   
    camera.enabled = false; // 避免自动渲染
   
    // 截图的缩放比例       
    let zoom = 1;
    
    // 截图的尺寸,本例是640x640的正方形截图
    // 如果是全屏,则为 cc.winSize.width, cc.winSize.height
    let width = 1280;  // cc.winSize.width
    let height = 720; // 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,32);  // 截图矩形的尺寸
    this.node.setPosition(origin);                  // 截图矩形的中心点

    camera.targetTexture = texture;

    // 缓存,备用
    this._camera = camera;
    this._texture = texture;
    this._camera.render(undefined);

  
}

public shot():void{
   
    // 执行一次 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/png");
    // 显示
    this.showTexture(dataUrl);
    // 下载
  //  this.downloadImg(dataUrl);
    // 分享到Facebook
    // this.shareOnFacebook(dataUrl);
    this.node.opacity = 255;
}

// 显示当前截图
// 其实也可以直接用rendertexture来作为SpriteFrame的纹理
showTexture(dataUrl){
  

    let div = document.createElement("div");
   

    div.id = "myDiv";
   
    div.style.position ="absolute"
    div.style.zIndex = "25";
    div.style.width = "1280px";
    div.style.height ="720px";
    div.style.marginLeft ="0%"; 
    div.style.marginTop="-0%";
    div.style.transform="scale(0.4,0.4)";
    let img = document.createElement("img");
    img.src = dataUrl;
    
    img.style.width = "1280px";
    img.style.height ="720px";
    img.style.transform = "rotate(90deg)";

    this.currentCut = img;
    div.appendChild(img);
    let content=  document.getElementById("content");
    content.appendChild(div);
  //  content.appendChild(divBG);
    this.currentDiv = div;
  
}
public currentDiv:HTMLDivElement=null;
currentCut:HTMLImageElement = null;
update(dt: any) {
    if(this.currentCut!=null&&this.currentCut!=undefined){
        if(window.orientation==0){
            this.currentCut.style.transform = "rotate(90deg)";

        }else{
            this.currentCut.style.transform = "rotate(0deg)";
       
        }
    }
}

// 下载到本地(在H5游戏里不是很实用)
downloadImg(base64:string){
    //把图片生成后download到本地
    var href = base64.replace(/^data:image[^;]*/, "data:image/octet-stream");
    document.location.href = href;
}

shareOnFacebook(base64Url:string){
    // Facebook instant game的分享
    // FBInstant.shareAsync({
    //     intent: 'SHARE', // * "INVITE" | "REQUEST" | "CHALLENGE" | "SHARE"
    //     image: base64Url,
    //     text: 'X is asking for your help!',
    //     data: { myReplayData: '...' },
    //   }).then(function() {
    //       console.info("share image done");
    //   }).catch(e=>{
    //       console.warn("share failed: ", e);
    //   });
}

public doClose():void{
    if(this.currentDiv!=null&& this.currentDiv!=undefined){
        let content=  document.getElementById("content");
        content.removeChild(this.currentDiv);
    }
    this.currentDiv=null;
}

上边这是我的代码

没有mask 节点一切正常,截图稍微有一点糊,有了这个节点就不行了

我是必须按照你们 范例里边的方式来么 ts 版的 cc.gfx.RB_FMT_S8 怎么没定义 是这个导致的,我直接写了 texture.initWithSize(size.width, size.height,32)导致的 改成 texture.initWithSize(size.width, size.height,cc.gfx.RB_FMT_S8)好了 能不能默认呢 这个参数 cc.gfx.RB_FMT_S8 默认 ts 里边 cc 命名空间没有

TS缺少这个接口的语法提示,我们补充下,不过语法报错并不影响实际运行的。

1赞