将画布图像调用到另一个div或页面

Question

Can anybody help me with this I'm solving this problem for almost a week and never get success. I want to happen is to call the image that was been created the image goes to "image" in a div and I want to call that image to the another page but No image show. Please take a look my code.

     <script>
          function myFunction(){
          html2canvas([document.getElementById('card-container')], {
          onrendered: function (canvas) {

         var data = canvas.toDataURL('image/png');


 // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

          var image = new Image();
          image.src =  data;

         document.getElementById('image').appendChild(image);

         }
          });
         }
          </script>

          <button onclick="myFunction()" >Try it</button>

          <div id="image">
          <p>Image:</p>
          </div>

<form enctype="multipart/form-data" action="sample.com" method="post" onsubmit="this.divcontent.value = document.getElementById('image').innerHTML;" >
            <input type="hidden" name="image" id="divcontent" value="" />
            <input type="submit" value="Submit" />
         </form>

Here is the ready-image.php

<?php
$img = $_POST['divcontent'];
echo "<img src='$img' alt='image' />";

 define('UPLOAD_DIR', 'wp-content/uploads/2014/03/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';   
           ?>

Please help me guys. Thank you very much.

Answer 1

I am not sure if this is what you want. Since the ajax part is missing from your code, I am just trying to pass the image captured to the ready-image.php and display it.

I am assuming that the codes are on 2 separate files.

<script>
    function myFunction() {
        html2canvas([document.getElementById('card-container')], {
            onrendered: function (canvas) {
                var data = canvas.toDataURL('image/png');
                var image = new Image();
                image.src =  data;
                document.getElementById('image').appendChild(image);
                $("#divcontent").val(data); //save the image base64 string to a hidden input
            }
        });
    }
</script>

<div id="card-container">
    <button onclick="myFunction()" >Try it</button>

    <div id="image">
        <p>Image:</p>
    </div>

    <form action="ready-image.php" method="POST">
        <input type="hidden" name="divcontent" id="divcontent" />
        <input type="submit" value="Submit" />
    </form>
</div>

ready-image.php:

<?php
    $img = $_POST['divcontent'];
    echo "<img src='$img' alt='image' />";

    define('UPLOAD_DIR', 'wp-content/uploads/2014/03/');

    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.'; 
?>

Update:

<?php
    $img = $_POST['divcontent'];
    echo "<img src='$img' alt='image' />";

    define('UPLOAD_DIR', 'wp-content/uploads/2014/03/');
    $filteredData = substr($img, strpos($img, ",") + 1);
    $decodedData = base64_decode($filteredData);

    $file = UPLOAD_DIR . uniqid() . '.png';

    $fp = fopen($file,'wb');
    if ($fp) {
        fwrite($fp, $decodedData);
        print $file;
    } else {
        print 'Unable to save the file.';
    }
    fclose($fp);
?>

I commented out the download part because I am not sure how exactly you call the ajax to save the file, so that part is omitted from my solution.