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);

然后將圖片上傳到服務器就可以了