How to save image of DIV to desktop using HTML2CANVAS in php

Question

When I will click the capture button the data will be saved in my server in upload folder instead of that I want my data to be saved in my Desktop. So that client will take a screenshot of the form and save the data in their PC . But I didn't find any solution. I am new to this coding language so whatever i got I made a file, This file is working fine but it saves the data in the server folder I want to save in client desktop so that they can save in their 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

When you're using php and ajax POSt request, you're basically pass information from the browser to the server... file_put_contents by definition is a server side file saving command

you're solution must be on the Javascript side, opening a dialog box for the user to save the file. No php or ajax required

After some googling, I've found a library to do just that, jQuery required

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