对于一些需要使用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上查看文档。
大功告成~~