Как сохранить изображение DIV на рабочий стол, используя HTML2CANVAS в php - PullRequest
0 голосов
/ 04 марта 2020

Когда я нажму кнопку захвата, данные будут сохранены на моем сервере в папке загрузки вместо того, чтобы я хотел, чтобы мои данные были сохранены на рабочем столе. Так что клиент сделает снимок экрана формы и сохранит данные в своем P C. Но я не нашел никакого решения. Я новичок в этом языке программирования, поэтому, что бы я ни получил, я создал файл. Этот файл работает нормально, но он сохраняет данные в папке сервера, которую я хочу сохранить на рабочем столе клиента, чтобы они могли сохранить их в своем P C.

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

enter image description here

1 Ответ

0 голосов
/ 04 марта 2020

Когда вы используете php и ajax POSt-запрос, вы в основном передаете информацию из браузера на сервер ... file_put_contents по определению является командой сохранения файла на стороне сервера

you Решение должно быть на стороне Javascript, открывающее диалоговое окно для сохранения файла пользователем. Нет php или ajax требуется

После некоторого поиска в Google я нашел библиотеку для этого, jQuery требуется

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

...