Render Texture Save to file

Cocos Creator
#1

haloo. i need help for save file png after render texture.

/**
const spriteFrame = this.sprite.spriteFrame!;

    const sp = new SpriteFrame();

   

    sp.reset({

        originalSize: spriteFrame.originalSize,

        rect: spriteFrame.rect,

        offset: spriteFrame.offset,

        isRotate: spriteFrame.rotated,

        borderTop: spriteFrame.insetTop,

        borderLeft: spriteFrame.insetLeft,

        borderBottom: spriteFrame.insetBottom,

        borderRight: spriteFrame.insetRight,

    });

    const renderTex = this._renderTex = new RenderTexture();

    renderTex.reset({

        width: 128,

        height: 128,

    });

    this.camera.targetTexture = renderTex;

    sp.texture = renderTex;

    this.sprite.spriteFrame = sp;

    // this.sprite.updateMaterial();

    this.scheduleOnce(()=>{

        renderTex.resize(512, 512);

    },2);

**/

i use cocos 3.7

thank you

#2

Posting solution provided by @mvrlin in the discord

function screenshot(renderTexture: RenderTexture) {
  const data = renderTexture.readPixels();
  const { height, width } = renderTexture;

  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = width;
  canvas.height = height;

  const rowBytes = width * 4;

  for (let row = 0; row < height; row++) {
    const srow = height - 1 - row;

    const imageData = ctx.createImageData(width, 1);
    const start = srow * width * 4;

    for (let i = 0; i < rowBytes; i++) {
        imageData.data[i] = data[start+i];
    }

    ctx.putImageData(imageData, 0, row);
  }

  canvas.toBlob((blob) => {
    const file = new File([blob], "screenshot.png", { type: "image/png" });
    const href = URL.createObjectURL(file);

    const anchor = document.createElement("a");
    
    Object.assign(anchor, {
      download: file.name,
      href,
    });

    document.body.appendChild(anchor);
    anchor.click();

    setTimeout(() => {
      URL.revokeObjectURL(href);
      document.body.removeChild(anchor);
    });
  }, "image/png");
}

Please note that on native platforms you will need to use native.fileUtils to write data to file.

1 Like