Scratch3.0保存作品时获取封面图

Scratch 的舞台是基于canvas，最初尝试直接通过canvas的dom，然后生成图片，但最后只能得到一个黑色的图片，得到黑色图片的原因是没有取到有效的canvas而不是因为图片跨域，当初在这里走了很多弯路，继续研究舞台组件stage.jsx，从vm.renderer可以获取canvas，于是通过这个canvas对象生成图片，记得当时的效果是偶尔会得到有效图片，但是大部分时候依然是黑色的图片，原因稍后回解释。为了实现截图，当时又进一步研究了renderer的代码，最后找到了draw方法，通过多次尝试发现在draw方法的最后执行canvas对象生成图片可以获得舞台的有效图片。

在node_modules中找到scratch-render/src/RenderWebGL.js中的draw方法，也可以直接在dist中修改编译后的文件。顺便解释一下draw是对舞台进行了清理和重新绘制，而draw的频率非常频繁，因此不能直接通过canvas获取图片。在重绘后追加获取图片的toDataURL方法，考虑到需要在gui里面调用，此处采用了监听键盘事件来通信，接收到截图请求将舞台图片放在window.sessionStorage内存中，在需要使用的时候可以直接从sessionStorage获得。

draw () {
        this._doExitDrawRegion();
		// 获取gl
        const gl = this._gl;
		// 
        twgl.bindFramebufferInfo(gl, null);
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
        gl.clearColor.apply(gl, this._backgroundColor);
        gl.clear(gl.COLOR_BUFFER_BIT);
		// 重新绘制
        this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection);
        // 增加如下代码
        let img = new Image();
        img.src = gl.canvas.toDataURL('image/png',0.7)
        document.onkeydown = function (e) {
            if(e.keyCode == 16){
                window.sessionStorage.setItem("coverImg",img.src)
                console.log('webGL')
            }
        }
    }

当然，我们肯定不能在依赖包里去修改文件

this.props.vm.renderer.draw();
const img = new Image();
img.src = this.props.vm.renderer.canvas.toDataURL('image/png', 0.7);
const blob = this.dataURLtoBlob(img.src);

然后将图片上传到服务器就可以了