Tengo el siguiente html y estoy tratando de convertirlo en una imagen base64. Pero decodificar el código base64 produce una imagen incorrecta. Aquí está mi código. Necesito obtener la codificación base64 de la imagen que necesito pasar a una variable PHP. ¿Dónde me estoy equivocando aquí? ¿Hay una mejor manera?

CSS:

 body { color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; height: 100%; font-size: 14px; } div { display: block; } .divtable { border-top: 1px solid #eceff1; margin: 0 -16px; word-break: break-all; } .tablerow { border-bottom: 1px solid #eceff1; text-decoration: none; color: #000; display: flex; } .tablecol { line-height: 1.5em; padding: 10px 15px; flex: 1; } .bar { border-radius: 3px; background: #eee; display: inline-flex; width: 100%; } .text { display: inline-block; background: #04b; text-align: center; font-size: 12px; line-height: 18px; } .a { background: #28EB52; } .b { background: #F0FF0D; }

HTML/JS:

 <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <div class="divtable"> <div class="tablerow"> <div class="tablecol">Label</div> <div class="tablecol"> <div class="bar"> <div class="text a" style="flex-grow: 8">8</div> <div class="text b" style="flex-grow: 15">15</div> </div> </div> </div> </div> <script>html2canvas(document.body).then(canvas => { console.log(canvas.toDataURL('image/png')); });</script>