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上查看文檔。

大功告成~~