Estoy renderizando una captura de pantalla con html2canvas 0.4.0 y quiero guardarla como imagen en mi servidor web.

Para ello, he escrito la siguiente función:

JavaScript

function screenShot(id) {

    html2canvas(id, {
        proxy: "https://html2canvas.appspot.com/query",
        onrendered: function(canvas) {

            $('body').append(canvas); // This works perfect...

            var img = canvas.toDataURL("image/png");
            var output = img.replace(/^data:image\/(png|jpg);base64,/, "");

            var Parameters = "image=" + output + "&filedir=" + cur_path;
            $.ajax({
                type: "POST",
                url: "inc/saveJPG.php",
                data: Parameters,
                success : function(data)
                {
                    console.log(data);
                }
            }).done(function() {
            });

        }
    });
}    

saveJPG.php

<?php
    $image = $_POST['image'];
    $filedir = $_POST['filedir'];
    $name = time();

    $decoded = base64_decode($image);

    file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX);


    echo $name;
?>    

Después de renderizar el lienzo, puedo agregarlo perfectamente al cuerpo HTML, pero guardarlo en mi servidor da como resultado un archivo dañado (?).

¿Puedo leer las dimensiones en IrvanView, pero la imagen es transparente / vacía? El archivo es de unos 2.076 KB de gran tamaño. Así que no está realmente vacío.

Intenté esto con JPEG también y da como resultado un archivo dañado e IrfanView dice algo así como "longitud de marcador falsa".

La captura de pantalla tiene las dimensiones de 650x9633. ¿Son demasiados datos para un método POST?