html2canvas iframe и захват изображения и сохранение на сервере - PullRequest
Новая
       42

html2canvas iframe и захват изображения и сохранение на сервере

0 голосов
/ 09 апреля 2019

Я хочу сохранить скриншот на сервере, когда нажимаю на div на странице. Это несколько проблем. Я новичок. Пожалуйста, помогите.

1) Изображение сохраняется, но также отображается внизу страницы. просто хочу быть спасенным. 2) Это самое главное. страница содержит файлы iframe и изображения. Моя главная цель - сфотографировать их. но я не был успешным. пожалуйста, помогите.

мой HTML-файл 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="mydiv">
here is iframe
</div>
<div>
   bla bla bla 
   image 
    </div>
<script type="text/javascript" src="html2canvas.js"></script>

    <!-- Script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>

var mydiv = document.getElementById('mydiv');

mydiv.style.cursor = 'pointer';
mydiv.onclick = function () {
    html2canvas(document.body).then(function(canvas) {
            document.body.appendChild(canvas);

         // Get base64URL
         var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');

         // AJAX request
         $.ajax({
            url: 'ajaxfile.php',
            type: 'post',
            data: {image: base64URL},
            success: function(data){
               console.log('Upload successfully');
            }
         });
       });
};
mydiv.onmouseover = function() {
    this.style.backgroundColor = 'white';
};
mydiv.onmouseout = function() {
    this.style.backgroundColor = '';
};
</script>
</body>
</html>

пожалуйста, отредактируйте код для меня. как это работает так, как я хочу.

ajaxfile.php У меня нет проблем с этим 

<?php
$image = $_POST['image'];
$location = "upload/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = "screenshot_".uniqid().'.png';
$file = $location . $filename;
file_put_contents($file, $image_base64);
...