|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
28.02.2019, 12:58 | #1 |
Пользователь
Регистрация: 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. |
Опции темы | Поиск в этой теме |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
нужно сразу создавать связи в 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 |