How to screen capture?

Cocos Creator
#1

var renderScreen = new cc.RenderTexture(cc.winSize.width, cc.winSize.height, cc.Texture2D.PIXEL_FORMAT_RGBA8888);

    renderScreen.setVirtualViewport(cc.p(0, 0), cc.rect(0, 0, cc.winSize.width, cc.winSize.height), cc.rect(0, 0, cc.winSize.width, cc.winSize.height))
    renderScreen.setAutoDraw(true);
    renderScreen.beginWithClear(255, 255, 255, 0, 0, 0);
    cc.director.getRunningScene().visit();
    renderScreen.end();

var iconSprite = this.node.getComponent(cc.Sprite);

        iconSprite.spriteFrame = new cc.SpriteFrame();
        iconSprite.spriteFrame.setTexture(renderScreen.getSprite().texture);

is success but i want save to local image…

and how update to server?

#2

captureCanvas: function (_x, _y, _width, _height) {

    /* image/png.
    var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
    var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
    var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
    */

    var callback = () => {


        //canvas 캡쳐
        //this._imageHtmlElemental.src = cc._canvas.toDataURL()
        //cc.log(cc._canvas.toDataURL());



        //1. canvas elemental base64 데이터 get
        var imageData = cc._canvas.toDataURL();

        //2. 2d canvas 만들기 
        var captureCanvas = document.createElement("canvas");
        captureCanvas.id = 'captureCanvas';
        captureCanvas.width = cc.winSize.width;
        captureCanvas.height = cc.winSize.height;
        var captureCanvasCtx = captureCanvas.getContext("2d");

        //2.5 이미지 만들기 
        var image = new Image();
        image.src = imageData;
        image.onload = () => {

            //3. 2d canvas에 이미지 붙이기 
            captureCanvasCtx.drawImage(image, 0, 0, cc.winSize.width, cc.winSize.height);


            //4. 2d canvas에서 오려올 데이터 만들기 
            var cropImageData = captureCanvasCtx.getImageData((cc.winSize.width/2)-(_width/2)+_x, (cc.winSize.height/2)-(_height/2)+_y, _width, _height);

            //5. 오려진 데이터 사이즈만큼의 canvas만들기
            var cropCanvas = document.createElement("canvas");
            cropCanvas.id = 'cropCanvas';
            cropCanvas.width = _width;
            cropCanvas.height = _height;

            //6. 오려진 데이터를 오려진 canvas에 그리기 
            var cropCanvasCtx = cropCanvas.getContext("2d");
            cropCanvasCtx.rect(0, 0, _width, _height);
            cropCanvasCtx.fillStyle = 'white';
            cropCanvasCtx.fill();
            cropCanvasCtx.putImageData(cropImageData, 0, 0);


            //7. 잘려진 이미지 데이터
            var cropCanvasBase64Data = cropCanvas.toDataURL();
            // cc.log(cropCanvasBase64Data);

            this._imageHtmlElemental.src = cropCanvasBase64Data;

            cropCanvas = null;
            captureCanvas = null;


        };

    }

    //draw 이벤트 발생후 toDataURL을 해주어야 데이터를 받을수 있다 
    cc.director.once(cc.Director.EVENT_AFTER_DRAW, callback);

},
#3

Did you found out how to do it?

#4

You’d have to modify the engine for capturing the canvas like that.

'preserveDrawingBuffer': true in cocos2d/core/CCGame.js

1 Like