Blockly获取workspace的代码块截图

对于一些需要使用blockly的项目来说，有可能需要代码截图这个功能，这里就把我实现好的放出来，并简单说一说原理。

上面是官方的例子，那么我们如何拿到整个工作区域的代码块截图呢？

1.首先，需要获取工作区域(workplace)的对象

var demoWorkspace = Blockly.inject('blocklyDiv',{
    media: '../../media/',
    toolbox: document.getElementById('toolbox')
});
  

上面的demoWorkspace就是工作区域的对象。

如果我们使用console.log(demoWorkspace)，我们可以再控制台看到很多属性。其中比较重要的一个svgBlockCanvas_ 其实这个就是一个svg对象。

通过对这个svg对象进行一些操作就可以转化为图片。

2.整理工作区域的块(重要)

如果没有完成这一步，得到的块有可能是不完整的。

下面就是整理块的代码,以上面的demoWorkspace这个作为例子:

demoWorkspace.cleanUp()
//整理块，可以在工作区域里右键看到这个功能

3.引入一