一種3D截圖方案

背景

參考 TRUE SPACE with Cocos 技術分享^[1]中的動態(tài)生成海報的介紹，以及作者的支持。實現(xiàn)一個長按保存分享截圖的方案。

效果

在微信瀏覽器中預覽效果如下

環(huán)境

Cocos Creator 3.7.1
Web 瀏覽器

原理

原作者講的非常清楚，只需要按照以下步驟實現(xiàn)即可。

3D相機生成一個RT 賦予給2D精靈
擺上一些二維碼等UI
UI相機再生成一張RT
讀取RT中的數(shù)據(jù)，傳給 canvas
canvas 生成圖片數(shù)據(jù)傳給 Image
適配Image對象大小位置

視頻

錄了一段操作視頻^[2]供大家參考。

代碼

這段代碼的截圖功能是按照高度適配的方式寫的，如有其他需求，可自行修改相關邏輯。僅供大家參考學習。

import { _decorator, Component, Node, Camera, RenderTexture, view, UITransform, log, game, screen, NodeEventType } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CaptureImage')
export class CaptureImage extends Component {
    @property(Camera)
    copyCamera: Camera = null!;

    @property(Node)
    targetNode: Node = null!;

    @property(Node)
    captureBtn: Node = null!;

    @property(Node)
    closeBtn: Node = null!;

    rt: RenderTexture

    private _image: HTMLImageElement
    _canvas: HTMLCanvasElement = null!;
    _buffer: ArrayBufferView = null!;

    start() {
        log('歡迎關注微信公眾號【白玉無冰】 https://mp.weixin.qq.com/s/4WwCjWBtZNnONh8hZ7JVDA')
        this.rt = new RenderTexture();
        this.rt.reset({
            width: view.getVisibleSize().width,
            height: view.getVisibleSize().height,
        })
        this.copyCamera.targetTexture = this.rt;
        this.captureBtn.active = true;
        this.closeBtn.active = false;
        this.captureBtn.on(NodeEventType.TOUCH_END, this.copyRenderTex, this)
        this.closeBtn.on(NodeEventType.TOUCH_END, this.clearCapture, this)
    }

    private copyRenderTex() {
        const width = this.targetNode.getComponent(UITransform).width;
        const height = this.targetNode.getComponent(UITransform).height;
        const anchorPoint = this.targetNode.getComponent(UITransform).anchorPoint;
        const worldPos = this.targetNode.getWorldPosition();
        this._buffer = this.rt.readPixels(Math.round(worldPos.x - width * anchorPoint.x), Math.round(worldPos.y - height * anchorPoint.y), width, height);

        if (!this._canvas) {
            this._canvas = document.createElement('canvas');
            this._canvas.width = width;
            this._canvas.height = height;
        } else {
            let ctx = this._canvas.getContext('2d');
            ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
        }
        let ctx = this._canvas.getContext('2d')!;
        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] = this._buffer[start + i];
            }
            ctx.putImageData(imageData, 0, row);
        }

        const scale = (view.getVisibleSizeInPixel().height / screen.devicePixelRatio) / view.getDesignResolutionSize().height
        const imageWidth = width * scale
        const imageHeight = height * scale
        let img = new Image(imageWidth, imageHeight);
        img.style.position = "absolute"
        img.style.marginTop = -imageHeight / 2 + "px"
        img.style.marginLeft = -imageWidth / 2 + "px"
        img.style.top = "50%"
        img.style.left = "50%"
        img.src = this._canvas.toDataURL();
        game.container!.appendChild(img);
        if (this._image) {
            game.container!.removeChild(this._image)
        }
        this._image = img;

        this.captureBtn.active = false;
        this.closeBtn.active = true;
    }

    private clearCapture() {
        if (this._image) {
            game.container!.removeChild(this._image)
        }
        this._image = null;
        this.captureBtn.active = true;
        this.closeBtn.active = false;
    }
}