yichael_tensecondchallenge/assets/Scripts/ScreenShoot.js

cc.Class({
    extends: cc.Component,

    properties: {
       
    },
    start()
    {
        let self =this;
        let url = '';

        this.scheduleOnce(function(){
            url = self.screenshot().src;
            console.log(url)
        },2);
        
        // this.scheduleOnce(function(){
        //     self.setConsoleImage(url);
        // },4);
        
    },
    screenshot() {
    let node = cc.director.getScene().getChildByName("Canvas").getChildByName("screenshot");
    let camera = node?.getComponent(cc.Camera);
    if(!node){
      node = new cc.Node("screenshot");
      node.parent = cc.director.getScene().getChildByName("Canvas");
      camera = node.addComponent(cc.Camera);
    }
  
    // 设置你想要的截图内容的 cullingMask
    // camera.cullingMask = 0xffffffff;
  
    // 新建一个 RenderTexture，并且设置 camera 的 targetTexture 为新建的 RenderTexture，这样 camera 的内容将会渲染到新建的 RenderTexture 中。
    let texture = new cc.RenderTexture();
    texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height);
    camera.targetTexture = texture;
  
    // 渲染一次摄像机，即更新一次内容到 RenderTexture 中
    camera.render();
  
    // 这样我们就能从 RenderTexture 中获取到数据了
    let data = texture.readPixels();
  
    // 接下来就可以对这些数据进行操作了
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = texture.width;
    canvas.height = texture.height;
  
    let width = texture.width;
    let height = texture.height;
  
    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");
    let img = document.createElement("img");
    img.src = dataURL;
    return img;
  },
  setConsoleImage(url) {
    var img = new Image();
    img.style.display = "none";
  
    document.body.appendChild(img);
    img.src = url;
    img.onload = function () {
      var css = [
        "padding: " + (img.height / 2 - 8) + "px " + img.width / 2 + "px;",
        "line-height: " + img.height + "px;",
        "background-image: url(" + url + ");",
      ];
      console.log("%c ", css.join(""));
    };
  }
});