求教WebGL模式下的截屏方法

Creator 2.x
#1
  • Creator 版本：1.6.1
  • 目标平台： Web（WebGL模式）

我希望给应用的 Web 版加一个截屏功能，目前该应用只支持 WebGL 模式下使用。而我所知道的 Web 版截屏方案都是 for Canvas 模式的。有没有 for WebGL 的呢？

#2

找到方法了：http://discuss.cocos2d-x.org/t/screenshot-in-webgl-in-creator/39452/4

1赞
#3

有空能贴下 代码吗？ 我弄了下 截取下来的还是一张黑色图片。:joy:

#4

在使用1.4.2引擎过程中编写的截图工具，再将项目在1.8.1中进行打包过程中截图时报错
报错代码：var renderTexture = new cc.RenderTexture(width, height, undefined, gl.STENCIL_INDEX8);
报错断点：gl.texImage2D(gl.TEXTURE_2D, 0, glFmt.internalFormat, glFmt.format, glFmt.pixelType, img)
报错内容：Uncaught TypeError: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: No function was found that matched the signature provided.
at CCClass.190.game.once.p.setImage (cocos2d-js.js:35579)
at CCClass.190.game.once._p.update (cocos2d-js.js:35562)
at CCClass.190.game.once._p.initWithData (cocos2d-js.js:35600)
at 243.cc.RenderTexture.WebGLRenderCmd.243.proto.initWithWidthAndHeight (cocos2d-js.js:43839)
at TheClass.initWithWidthAndHeight (cocos2d-js.js:43598)
at TheClass.ctor (cocos2d-js.js:43565)
at new TheClass (cocos2d-js.js:30313)
at eval (eval at saveNodeToTempFilePathSync (project.dev.js:58178), :1:1)
at Object.saveNodeToTempFilePathSync (project.dev.js:58178)
at Object.shareNodeImg (project.dev.js:58164)

在和之前的版本检查后未找到原因，有大神可以帮助看一下吗

#5

类似这样：

var cb = function () {
    var canvas = document.getElementById("GameCanvas");
    var base64 = canvas.toDataURL("image/png");
    var image = new Image();
    image.src = base64;
    image.onload = () => {
        var newCvs = document.createElement('canvas');
        newCvs.width = canvas.width;
        newCvs.height = canvas.height;
        var widthRate = newCvs.width / cc.director.getVisibleSize().width;
        var heightRate = newCvs.height / cc.director.getVisibleSize().height;
        var targetWidth = _this.canvas.width * _this.canvas.scale * widthRate - 20;
        var targetHeight = _this.canvas.height * _this.canvas.scale * heightRate - 40;
        var newCtx = newCvs.getContext('2d');
        newCtx.drawImage(image, 0, 0);
        let left = Math.abs(marginX) * widthRate + 20;
        let top = Math.abs(cc.director.getVisibleSize().height - _this.canvas.height * _this.canvas.scale - Math.abs(marginY)) * heightRate + 20;
        var imgData = newCtx.getImageData(left, top, targetWidth, targetHeight);
        var cvs2 = document.createElement('canvas');
        cvs2.width = targetWidth;
        cvs2.height = targetHeight;
        var ctx2 = cvs2.getContext('2d');
        ctx2.putImageData(imgData, 0, 0);
        var result = cvs2.toDataURL();
    };
}
cc.director.on(cc.Director.EVENT_AFTER_DRAW, cb);
#6

前两天我也做了图片分享的，已经完美适配了

#7

分享下嘛

#8

嗯，我们后面也写了一个多端都适用的通用截屏方法。也许后面我们也分享出来。

#9

Creator 多端适配通用截屏方法，点击文章查看。已适配android、ios、web下的Canvas与WebGl环境。

#10

链接错误？

#11

不能看啊

#12

点这：https://www.jianshu.com/p/e06a35c67f8b

#13

Creator 多端适配通用截屏方法，已适配android、ios、web下的Canvas与WebGl环境。教程与demo地址：https://www.jianshu.com/p/e06a35c67f8b , github:https://github.com/Leo501/CocosCreatorTutorial/tree/master/Screenshot。如果链接打不开，可以百度【简书】。进入简书搜索【Cocos Creator】 专题，里面有好多关于Cocos Creator的各方面教程。

#14

非常感谢 已经截图成功了

#15

请问这个截屏后切图，怎么切好的图再转成base64呢。我这边代码这么写的：
newframe.setRect(cc.rect(0, 0,width,height));
var imageData = newframe.getTexture().getHtmlElementObj();
然后把这个imageData再转成base64结果是原来未切的图

#16

链接打不开了，求分享一下