How to convert PNG to XML file?

this will load the xml and change to blocks and download automaticly:

the js function:

function XmlToPng(xml){
	var base64ToBlob = function(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for(let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        return new Blob([uInt8Array], {
            type: contentType

    var dom  = Blockly.Xml.textToDom(xml);
    Blockly.Xml.domToWorkspace(dom, Blockly.getMainWorkspace());
		let aLink = document.createElement('a');
		let blob = base64ToBlob(uri);
		let evt = document.createEvent("HTMLEvents");
		evt.initEvent("click", true, true); = 'blocks_' + new Date().getTime() + '.png';
		aLink.href = URL.createObjectURL(blob);;

how can i get xml code

when i open png with notepad.
its looking like this. How can i decrypt xml?

And I can’t do this process (xml to png) without Kodular?

  1. this png file should be generated for single block(event/procedure/define variable), not the whole work space.
  2. open the png by notepad/ Notepad++ or other editor, at the end you will find the xml
  3. if you don’t want use this in kodular, you can check with Blockly website, and set up a local environment on your pc.

I got it now. Thank you

1 Like