Question

单击页面上的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);

html2canvas iframe和图像捕获并保存到服务器

0 个答案: