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.引入一个第三方的js库，saveSvgAsPng

附上库的github地址: https://github.com/exupero/saveSvgAsPng.

你也可以通过其他第三方的库来完成svg转化为png

4.转化

这里是用savaSvgAsPng这个库来完成转化。

使用方法:svgAsPngUri

 svgAsPngUri(Code.workspace.svgBlockCanvas_, {}, function(uri) {
     console.log(uri);
        //这里的uri就是svg转化为png后的base64。
 })

库的使用可以在上面的github上查看文档。

大功告成~~