0

I want to save the screenshot to server when click on div on page. It's a few problems. I'm rookie. Please help.

1)The picture is being saved but also shown at the bottom of the page. just want to be saved. 2)This is the most important. page contains iframe and image files. my main goal is to take images of them. but I was not successful. please help.

my html file

<!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>

please edit the code for me. how it works the way I want.

ajaxfile.php I have no problem with this

<?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);
omerkup
  • 1
  • I'm a beginner and my English is not very good. please edit the codes for me. I would be grateful. server saving operation is running. I want the inside of the iframe to appear in the picture. – omerkup Apr 09 '19 at 16:58
  • *"I was not successful"* ... That is virtually meaningless with regard to problem solving. You need to tell us what does or doesn't work, errors generated etc – charlietfl Apr 09 '19 at 16:59
  • Although it has content in the iframe, it does not appear in the screenshot. – omerkup Apr 09 '19 at 17:12
  • Ok. That makes sense. An iframe has it's own window, document and body. – charlietfl Apr 09 '19 at 17:15
  • Is there no way to get a screenshot in iframe? – omerkup Apr 09 '19 at 19:16
  • Really not sure what best approach is here. Do a search for *"html2canvas iframe"* – charlietfl Apr 09 '19 at 19:19
  • https://stackoverflow.com/questions/18737134/html2canvas-no-screenshot-for-iframe var body = $(iframe).contents().find('body')[0]; html2canvas(body, { onrendered: function( canvas ) { $("#content").empty().append(canvas); }, exactly what should I do. How should I edit the codes. where should I add this code. which part should I remove. I'm having a hard time not knowing javascript. – omerkup Apr 09 '19 at 21:29
  • ok well just to be sure... is the iframe from same domain as page? Can't access it if not. Then next issue would be how to combine 2 images since you wanted the outer image to include the inner one – charlietfl Apr 09 '19 at 21:31
  • no. a different domain. so there is nothing I can do then. Thank you very much for your comments. I appreciate it. – omerkup Apr 09 '19 at 21:47

0 Answers0