求助document.getElementById("GameCanvas")问题

Creator 2.x
#1

查找了许多h5的截图方案，关键问题使用var canvas = document.getElementById(“GameCanvas”);里面根本就没有任何数据，截屏下来是黑色图片，请问creator下web端的主场景节点图片在哪可以获得呢，或者如何将cc.node转换成转成网页下的节点呢？

3赞
#2

分享一个 Web 截图的组件

cc.Class({
    extends: cc.Component,

    properties: {
        captureAll: true
    },

    capture () {
        if (cc.sys.isNative) {
            return;
        }

        var target = this.captureAll ? cc.director.getRunningScene() : this.node._sgNode;

        var width = Math.floor(cc.winSize.width), height = Math.floor(cc.winSize.height);
        var renderTexture = new cc.RenderTexture(width, height);
        // 如果包含 Mask，需要用
        // var renderTexture = cc.RenderTexture.create(width, height, cc.Texture2D.PixelFormat.RGBA8888, gl.DEPTH24_STENCIL8_OES);
        renderTexture.begin();
        target.visit();
        renderTexture.end();

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
        if (cc._renderType === cc.game.RENDER_TYPE_CANVAS) {
            var texture = renderTexture.getSprite().getTexture();
            var image = texture.getHtmlElementObj();
            ctx.drawImage(image, 0, 0);
        }
        else if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {
            var buffer = gl.createFramebuffer();
            gl.bindFramebuffer(gl.FRAMEBUFFER, buffer);
            var texture = renderTexture.getSprite().getTexture().getHtmlElementObj();
            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
            var data = new Uint8Array(width * height * 4);
            gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data);
            gl.bindFramebuffer(gl.FRAMEBUFFER, null);

            var rowBytes = width * 4;
            for (var row = 0; row < height; row++) {
                var srow = height - 1 - row;
                var data2 = new Uint8ClampedArray(data.buffer, srow * width * 4, rowBytes);
                var imageData = new ImageData(data2, width, 1);
                ctx.putImageData(imageData, 0, row);
            }
        }

        var dataURL = canvas.toDataURL("image/jpeg");
        var img = document.createElement("img");
        img.src = dataURL;
        return img;
    },

    captureAndShow () {
        var img = this.capture();
        img.style.position = 'absolute';
        img.style.display = 'block';
        img.style.left = img.style.top = '0px';
        img.zIndex = 100;
        document.body.appendChild(img);
    }
});
1赞
#3

image.png1220×240 17.9 KB
狂报错

#4

var texture = renderTexture.getSprite().getTexture().getHtmlElementObj();
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
这一部分好像有点问题，
var texture = renderTexture.getSprite().getTexture();
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture._glID, 0);
这里要改成这样子好像就可以了

#5

老大 我用webGl的话 截屏就是全黑的 选canvas 是成功的 是不是这个只支持canvas？

#6

webgl截图有API

#7

你好 webgl的截图API 是哪个？ H5

#8 
if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {
            var buffer = gl.createFramebuffer();
            gl.bindFramebuffer(gl.FRAMEBUFFER, buffer);
            var texture = renderTexture.getSprite().getTexture().getHtmlElementObj();
            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
            var data = new Uint8Array(width * height * 4);
            gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data);
            gl.bindFramebuffer(gl.FRAMEBUFFER, null);

            var rowBytes = width * 4;
            for (var row = 0; row < height; row++) {
                var srow = height - 1 - row;
                var data2 = new Uint8ClampedArray(data.buffer, srow * width * 4, rowBytes);
                var imageData = new ImageData(data2, width, 1);
                ctx.putImageData(imageData, 0, row);
            }
        }
#9

对啊 我就是用这个。但截出来的是黑图 sprite 按钮 这些都截不到

#10

webgl.png898×696 22.6 KB

#11

自己顶下

#12

解决了。。webgl 还是用toDataURL 不需要用gl

#13

var buffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, buffer);
var texture = renderTexture.getSprite().getTexture().getHtmlElementObj();
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
var data = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

是改了这一块吗？可以具体描述一下吗 ? 我弄了半天截下来的还是一张黑图。:weary:

#14

@绿茶犷野 0.0.

#15

var texture = renderTexture.getSprite().getTexture().getHtmlElementObj();
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
这段代码改成
var texture = renderTexture.getSprite().getTexture();
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture._webTextureObj, 0);
可以解决 webgl渲染模式黑图问题。

#16

1.9.0版中，
var texture = renderTexture.getSprite().getTexture().getHtmlElementObj();
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
这段代码改成
var texture = renderTexture.getSprite().getTexture();
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture._glID, 0);

#17

但welgl + 不全屏截图 情况下 出现只截取四分之一 怎么办 :sweat:

#18

用了你这个方式的代码截图了，但是图片有色差，不知道如何解决

#19

用这个方法截图，但当截图中有listview，scrollview带裁剪时，截图后会错位

#20

有色差请问有解决吗