Question

任何人都可以帮助我解决这个问题近一个星期我永远不会成功。我想要发生的是调用已创建的图像，图像转到＆＃34;图像＆＃34;在div中，我想将该图像调用到另一个页面，但没有图像显示。请看一下我的代码。

     <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>

这是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.';   
           ?>

请帮帮我们。非常感谢你。

Answer 1

我不确定这是不是你想要的。由于您的代码中缺少ajax部分，我只是尝试将捕获的图像传递给ready-image.php并显示它。

我假设代码在2个单独的文件中。

<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.'; 
?>

更新

<?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);
?>

我注释了download部分，因为我不确定你是如何调用ajax来保存文件的，因此我的解决方案中省略了该部分。

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

1 个答案: