html2canvas save image doesn't work

ajax, html2canvas, jquery, php

Solution

In case someone stumbles over the same problem, here is how I solved it:

The problem depended on the fact, that `+` in URLs is interpreted as an encoded space (like `%20`) by most servers. So I needed to encode the data first and then send it via `POST` to my designated PHP function.

Here is my code:

JavaScript

function screenShot(id) {

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

            var img = canvas.toDataURL("image/png");
            var output = encodeURIComponent(img);

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

        }
    });
}

savePNG.php

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



    $image = str_replace('data:image/png;base64,', '', $image);
    $decoded = base64_decode($image);

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


   echo $image;
?>

Cheers!

Problem

I'm rendering a screenshot with html2canvas 0.4.0 and want to save it as image on my webserver. To do so, I've written the following function: 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; ?> ``` After the canvas is rendered I can perfectly append it to the HTML body, but saving it on my server result in a corrupted (?) file. I can read the dimensions in IrvanView, but the image is transparent / empty? The file is about 2.076 KB large. So it's not really empty. I tried this with JPEG as well and it results in a corrupted file and IrfanView says something like "bogus marker length". The screenshot has the dimensions of 650x9633. Is it to much data for a POST-Method?

Original source

Related problems