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上檢視文檔。

大功告成~~