Example PNG Maker

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import qmlonline
Page {
    
    property var rows: textEdit.text.split(/\n/).filter(r => r.length)
    property int cols: Math.max(...rows.map(r => r.length))
    Frame {
        x: 10
        anchors.verticalCenter: parent.verticalCenter
        TextEdit {
            id: textEdit
            text:
            `.....pppp.....
...pppppppp...
..pppppppppp..
.pppwwppppwwp.
.ppwwwwppwwww.
.ppwwbbppwwbb.
pppwwbbppwwbbp
ppppwwppppwwpp
pppppppppppppp
pppppppppppppp
pppppppppppppp
pppppppppppppp
pppppppppppppp
pppp.pppp.pppp
.pp...pp...pp.
`
            font.family: "DejaVu Sans Mono"
            onTextChanged: Qt.callLater(grab)
        }
    }
    Frame {
        x: parent.width - width - 10
        anchors.verticalCenter: parent.verticalCenter
        background: Rectangle {
            border.color: "#8c8"
            border.width: 2
            color: "transparent"
        }
        padding: 2
        Item {
            id: scratch
            implicitWidth: cols
            implicitHeight: rows.length
            Repeater {
                model: rows
                Repeater {
                    property int rowIndex: index
                    property var rowData: modelData
                    model: cols
                    Rectangle {
                        x: index
                        y: rowIndex
                        width: 1
                        height: 1
                        color: getColor(rowData[index])
                    }
                }
            }
        }
    }
    
    Frame {
        anchors.centerIn: parent
        background: Rectangle {
            border.color: "#8c8"
            border.width: 2
            color: "transparent"
        }
        padding: 2
        Item {
            implicitWidth: (cols || 1) * 20
            implicitHeight: (rows.length || 1) * 20
            Image {
                anchors.fill: parent
                source: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<rect x="0" y="0" width="20" height="20" fill="white"/>
<rect x="10" y="0" width="10" height="10" fill="#eee"/>
<rect x="0" y="10" width="10" height="10" fill="#eee"/>
</svg>`
                fillMode: Image.Tile
            }
            Image {
                id: img
                anchors.fill: parent
                smooth: false
            }
        }
    }
    
    footer: Frame {
        TextEdit {
            id: txt
            width: parent.width
            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        }
    }
    
    function grab() {
        scratch.grabToImage(function (result) {
            let kk = System.image(result.image);
            console.log(kk.width, kk.height);
            txt.text = kk.toDataURL();
            img.source = txt.text;
        } );
    }
    function getColor(ch) {
        return {
            "r": "red",
            "g": "green",
            "b": "blue",
            "c": "cyan",
            "y": "yellow",
            "m": "magenta",
            "k": "black",
            "o": "orange",
            "R": "darkred",
            "G": "darkgreen",
            "B": "darkblue",
            "C": "darkcyan",
            "Y": "#8B8000",
            "M": "darkmagenta",
            "K": "grey",
            "p": "pink",
            "P": "darkpink",
            "w": "white",
            "W": "white"
        }[ch]|| "transparent";
    }
}

You can Try it Online!