如何在 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

經過一些谷歌搜索，我找到了一個庫來做到這一點，需要 jQuery

http://johnculviner.com/jquery-file-download-v1-4-0-released-with-promise-support/