I make a small website with a constructor, a button on it, clicking on it to take a screenshot of the page and elements to send to the mail appear. When working with the site in the browser on the computer, the screenshots are made normally and everything works. When working with a site from a mobile device, misunderstandings begin. Some of the screenshots are done entirely, the other part is done half or third. Part of the screenshots is generally done.
<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="Name">
<input type="text" name="phone" placeholder="Telephone">
<input type="text" name="email" placeholder="Email">
<button type="submit">Send</button>
</form>
<div class="page">
<button class="open-order">Send</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>
Maybe I forgot something and someone will notice
Aucun commentaire:
Enregistrer un commentaire