Где скриншот делается в html2canvas()?

Question

Я пытаюсь загрузить скриншот на сервер через ph p или ajax. Но я не могу понять, где снимок экрана делается в html2canvas()? Я искал об этом, но не нашел решения. Пожалуйста, просмотрите мой код и направьте меня.

Код JS

$(function () {
  $("#btnSave").click(function () {
    html2canvas($("#widget"), {
      onrendered: function (canvas) {
        theCanvas = canvas;
        var image = canvas.toDataURL("image/jpeg");
        $('#captured_img').attr("src", image);
        $('#img_val').attr("value", image);
      }
    });
  });

HTML-код

<div id="widget" class="widget">
  <h1>THE IMAGE</h1>
</div>
<input type="hidden" name="img_val" id="img_val" value=""/>
<div id="showImage">
  <img id="captured_img" src="" height="120" width="100"/>
</div>
<input type="button" id="btnSave" value="Save PNG"/>

Answer 1

image/jpeg не поддерживает прозрачный фон, используйте image/png

html2canvas вернет тебя canvas вашей DOM, ты можешь получить base64 использование данных toDataURL метод холста. Загружать base64 как изображение, вам необходимо декодировать данные base64. file_put_contents Запишите строку в файл.

Используйте следующий скрипт:

PHP скрипт:

<?php
if (isset($_REQUEST['data'])) {
    $img = $_REQUEST['data'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = rand(0000000, 1131231) . '.png';
    $success = file_put_contents($file, $data);
    if ($success!==false) {
        echo 'done';
    } else {
        echo 'failed';
    }
}

HTML & JS:

$(function() {
  $("#btnSave").click(function() {
    html2canvas(document.getElementById('widget'), {
      onrendered: function(canvas) {
        var image = canvas.toDataURL("image/png");
        $('#captured_img').attr("src", image);
        $('#img_val').attr("value", image);
        $.post("decode.php", {
            data: image
          })
          .done(function(data) {
            alert("Status: " + data);
          });
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="widget" class="widget">
  <h1>THE IMAGE</h1>
</div>
<input type="hidden" name="img_val" id="img_val" value="" />

<div id="showImage">
  <img id="captured_img" src="" height="120" width="100" />
</div>
<input type="button" id="btnSave" value="Save PNG" />

Answer 2

Ваше изображение не создается ни в одной файловой системе, это просто строка в кодировке base64 canvas.toDataURL("image/jpeg"); назначен на источник изображения. Вы можете отправить эту строку в вызов ajax и создать файл в функции php. для получения более подробной информации о том, как создать изображение из строки base64, здесь есть ссылка dataurl на изображение для загрузки в php.