Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 28.02.2019, 12:58   #1
Denis Wazowski
Пользователь
 
Регистрация: 31.08.2018
Сообщений: 19
По умолчанию Скриншот делается через раз

Доброго дня!
Небольшой сайт с конструктором, на нем кнопочка, по нажатию на которую делается скриншот страницы и появляются элементы для отправки на почту. При работе с сайтом в браузере на компудахтере, скриншоты делаются нормально и все работает. При работе с сайтом с мобильных устройств начинаются непонятки. Часть скриншотов делается целиком, другая часть делается то наполовину, то на треть. Часть скриншотов вообще делается. Нестабильно одним словом.

Код прилагаю. Может что то забыл и кто то заметит. Заранее спасибо!

Код HTML:
<head>
.......
  <style type="text/css">
    input, button {
      font-family: Arial; 
      font-size: 16px;
    }
    .page {
      padding: 20px;
    }
    form {
      margin: 10px; 
      padding: 10px;
    }
    input, button {
      border-radius: 20px;
    }
    input {
      background: #fff; 
      border: solid #ddd 1px; 
      padding: 7px 15px;
    }
    input:hover {
      border-color: #ccc;
    }
    input:focus {
      border-color: #bbb;
    }
    button {
      background: #f44; 
      border: none;
      color: #fff; 
      cursor: pointer; 
      padding: 8px 16px;
    }
    button:hover {
      background: #44f;
    }
    .hide {
      display: none;
    }
    canvas {
      display: none;
    }
  </style>
</head>
<body>
.....

        <form class="order hide">
          <input type="text" name="name" placeholder="Имя">
          <input type="text" name="phone" placeholder="Телефон">
          <input type="text" name="email" placeholder="Email">
          <button type="submit">Отправить</button>
        </form>
        
        <div class="page">
          <button class="open-order">Отправить на почту</button>
        </div>
      </td>
    </tr>
  </table>

<script type="text/javascript" src="html2canvas.min.js"></script>
  <script type="text/javascript">
    let path = window.location.protocol + '//' + window.location.host + window.location.pathname + 'save.php';

    function Order (elem) {
      let screen = null;
      function open () {
        elem.classList.remove('hide');
      }
      
      function screenshot (canvas) {
        document.body.appendChild(canvas);
        screen = canvas.toDataURL('image/png').replace(/data:image\/png;base64,/, '');
      }
      
      function send (e) {
        e.preventDefault();
        var data = new FormData(elem);
        data.append('image', screen);
        let xhr = new XMLHttpRequest;
        xhr.onreadystatechange = function (){
          if (this.readyState == 4) {
            if (this.status == 200) {
              console.log('Success. Image ' + this.responseText + ' saved');
            } else {
              console.log('Fail. Error: ' + this.responseText);
            }
          }
        };
        xhr.open('POST', path, true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.send(data);
      }

      // конкструктор
      html2canvas(document.body)
      .then(screenshot)
      .then(open);
      elem.onsubmit = send;
    }

    document.querySelector('.open-order').onclick = function () {
      let order = new Order(document.querySelector('.order'));
    };
  </script>
</body>
_____
Код программы нужно выделять (форматировать) тегами [CODE][/CODE] (читать FAQ)
Модератор

Последний раз редактировалось Serge_Bliznykov; 28.02.2019 в 14:36.
Denis Wazowski вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужно сразу создавать связи в Access? или все потом делается через компоненты Delphi и в Access? edsjeka Помощь студентам 0 16.01.2016 20:23
Скриншот экрана через OpenGL UltraCoder Qt и кроссплатформенное программирование С/С++ 0 08.08.2012 17:46
Как это делается? Daison Свободное общение 1 10.04.2011 18:58
как это делается? natalie1983 Microsoft Office Excel 5 11.03.2010 18:20
как это делается? самая_счастливая Операционные системы общие вопросы 5 25.12.2009 10:41