html2canvas save image doesn't work

Question

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?

i would echo the `$decoded` with a `image/png` header back to the browser and see if you get an actual image first — DevZer0, Jul 16 '13 at 08:55
use `echo (int)(str_replace('M', '', ini_get('post_max_size')) * 1024 * 1024);` to check max post size — Daniel W., Jul 16 '13 at 08:56
@DanFromGermany thanks for your reply. I checked post_max_size and it is set to 64MB (Your line echoes 67108864). — dschu, Jul 16 '13 at 11:57
@DevZer0 I tried your suggestion by adding header('Content-Type: image/png'); to my php and echo $decoded back to my ajax function. The AJAX function uses console.log to output the image, but in Firebug all I get back is something like this: �PNG .... Any ideas how to debug this problem? — dschu, Jul 16 '13 at 12:04
don't return the value through ajax, have the return value come back in a popup window or something — DevZer0, Jul 16 '13 at 12:13
I came a lot closer to my issue: It is the following that happened: http://stackoverflow.com/questions/7410515/post-value-geting-plus-signs-removed — dschu, Jul 16 '13 at 13:27

dschu · Accepted Answer · 2015-04-14T12:38:55.147

15

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!

edited Apr 14 '15 at 12:38

answered Jul 16 '13 at 13:51

dschu

4,992
5
31
48

http://developergang.com/convert-div-image-using-html2canvas-save-using-ajax-php/ – gaurav kumar Jun 25 '16 at 16:27
@dschu thank you so much. can please tell us that what is the need of proxy? – Doulat Khan Apr 17 '17 at 13:24
@DoulatKhan When the page you want to render contains images that are not located on the same domain, they can't get rendered. Therefore, a proxy is needed, to load cross-origin images. [From the docs](https://html2canvas.hertzen.com/documentation.html): `Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.` – dschu Apr 17 '17 at 13:37
@dschu the proxy is no longer work and having this error "Python 2.5 is no longer available. Please refer to for more information." – Doulat Khan Jul 19 '17 at 15:22
any alternative way of proxy – Doulat Khan Jul 19 '17 at 15:24
@DoulatKhan Just set up your own proxy. The doc says that you shouldn't use this demo proxy in production anyway – dschu Jul 19 '17 at 16:29

html2canvas save image doesn't work

JavaScript

saveJPG.php

1 Answers1

JavaScript

savePNG.php

Linked