如何在 php 中使用 HTML2CANVAS 将 DIV 的图像保存到桌面

Question

当我单击捕获按钮时，数据将保存在我的服务器中的上传文件夹中，而不是我希望我的数据保存在我的桌面中。这样客户就会截取表格并将数据保存在他们的 PC 中。但我没有找到任何解决方案。我是这种编码语言的新手，所以无论我得到什么，我都制作了一个文件，这个文件工作正常，但它将数据保存在我想保存在客户端桌面中的服务器文件夹中，以便他们可以保存在他们的 PC 中。

<script>

  function doCapture() {

    window.scrollTo(0, 0);

    html2canvas(document.getElementById("about_data")).then(function(canvas) {

      console.log(canvas.toDataURL("image/jpeg", 0.7));

      var ajax = new XMLHttpRequest();

      ajax.open("POST", "save-capture.php", true);

      ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

      ajax.send("image=" + canvas.toDataURL("image/jpeg", 0.9));

      ajax.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {

          console.log(this.responseText);

        }

      }

    });

  }

</script>

<?php

    $image=  $_POST["image"];

    $image=explode(";",$image)[1];

    $image = explode(",",$image)[1];

    $image= str_replace(" ","+",$image);

    $image=base64_decode(($image));

    file_put_contents("uploads/filename.jpeg",$image);

?>

Answer 1

当您使用 php 和 ajax POST 请求时，您基本上是将信息从浏览器传递到服务器... file_put_contents 根据定义是服务器端文件保存命令您的解决方案必须在 Javascript 端，打开一个对话框供用户保存文件。无需 php 或 ajax经过一番谷歌搜索，我找到了一个库来做到这一点，需要 jQueryhttp://johnculviner.com/jquery-file-download-v1-4-0-released-with-promise-support/