cocos creator 小游戏区域截图功能实现

截图是游戏中非常常见的一个功能，在cocos中可以通过摄像机和 RenderTexture 可以快速实现一个截图功能，具体API可参考：https://docs.cocos.com/creator/manual/zh/render/camera.html?h=%E6%88%AA%E5%9B%BE，其中官方也提供了比较完整的例子。

实际上不用官网提供的全屏截图的例子，一般在网页中我们也能将页面截图保存，比如通过htmltocanvas，cocos开发的小游戏在网页中打开实际就是一个canvas，前端是可以通过将canvas保存为图片的，这里就不细说了。

我们还是来看下如何把屏幕中某一区域的内容生成图片并保存到本地。

1、创建RenderTexture

//新建一个 RenderTexture，并且设置 camera 的 targetTexture 为新建的 RenderTexture，这样 camera 的内容将会渲染到新建的 RenderTexture 中。

let texture = new cc.RenderTexture();
let gl = cc.game._renderContext;<br data-filtered="filtered">//如果截图中不含mask组件可以不加第三个参数，不过建议加上
texture.initWithSize(this.node.width, this.node.height, gl.STENCIL_INDEX8);//这里的宽高直接决定了截图的宽高，如果是全屏截图就是<code class="lang-javascript hljs">cc.visibleRect.width, cc.visibleRect.height,该处可以设置为截图目标区域的宽高</code>

this.camera = this.node.addComponent(cc.Camera); this.camera.targetTexture = texture; this.texture = texture;

2、绘制canvas

createSprite() {
        let width = this.texture.width;
        let height = this.texture.height;　　　　　//截图的本质是创建一个canvas，然后通过canvas生成图片材质
        if (!this._canvas) {
            this._canvas = document.createElement('canvas');
            this._canvas.width = width;
            this._canvas.height = height;
        } else {
            this.clearCanvas();
        }
        let ctx = this._canvas.getContext('2d');
        this.camera