Select Text read_text.html
whereisalice.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Capture and Save Area</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-language" content="en">
<meta http-equiv="pragma" content="no-cache">
<meta name="robots" content="INDEX,FOLLOW">
<!-- Styling and Background -->
<style type="text/css">
body { background: url("http://madhatterstamps.com/backg.jpg") fixed center no-repeat;}
.dragme { position: absolute; cursor: move; z-index: 10; } /* Set z-index to make sure the image stays on top */
</style>
<!-- JavaScript Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<!-- Drag and Drop Script -->
<script>
function captureAndSendToServer() {
const bodyElement = document.body;
// Temporarily disable dragging to prevent issues during capture
disableDragging();
// Use html2canvas to capture the entire body
html2canvas(bodyElement, { useCORS: true }).then(canvas => {
const imageDataURL = canvas.toDataURL("image/png");
console.log('Image Data URL:', imageDataURL);
fetch('/save-capture', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ imageData: imageDataURL })
})
.then(response => response.json())
.then(data => {
if (data.message) {
alert("Image saved successfully!");
} else if (data.error) {
alert("Error saving image: " + data.error);
}
})
.catch(error => {
console.error("Error during capture:", error);
alert("Error during capture: " + error);
});
}).catch(error => {
console.error("Error capturing area:", error);
alert("Error capturing area: " + error);
}).finally(() => {
enableDragging();
});
}
function disableDragging() {
var dragItems = document.querySelectorAll(".dragme");
dragItems.forEach(item => item.style.pointerEvents = "none");
}
function enableDragging() {
var dragItems = document.querySelectorAll(".dragme");
dragItems.forEach(item => item.style.pointerEvents = "auto");
}
</script>
</head>
<body id="capture-area" style="background-image: url(static/img/scene_back.jpg); color: rgb(204, 204, 204); background-color: rgb(153, 255, 153);" vlink="#551a8b" alink="#ee0000" link="#0000ee">
<!-- Capture Button -->
<button onclick="captureAndSendToServer()">Capture Screenshot</button>
<!-- Draggable Images -->
<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td colspan="2" rowspan="1" style="vertical-align: top;">
<p> </p>
<img class="dragme" src="static/img/Image2.gif" alt=""><img class="dragme"
style="width: 59px; height: 104px;" src="static/img/flower2.gif" alt=""><img
class="dragme" style="width: 74px; height: 74px;" src="static/img/rat.gif" alt=""><img
class="dragme" style="width: 77px; height: 138px;" src="static/img/Tag.gif" alt=""><br>
<br>
<img class="dragme" src="static/img/naughty.gif" alt=""><br>
<img class="dragme" style="width: 329px; height: 84px;"
src="static/img/back7.gif" alt=""><img class="dragme"
style="width: 42px; height: 75px;" src="static/img/flower2.gif" alt=""><img
class="dragme" style="width: 40px; height: 71px;" src="static/img/flower2.gif"
alt=""><img class="static/img/dragme" style="width: 40px; height: 71px;"
src="static/img/flower2.gif" alt=""><img
class="dragme" style="width: 99px; height: 89px;" src="static/img/butter1.gif" alt=""><img
class="dragme" style="width: 37px; height: 66px;" src="static/img/flower2.gif"
alt=""><br>
<img class="dragme" src="static/img/back6.gif" alt=""><img class="dragme"
style="width: 37px; height: 66px;" src="static/img/flower2.gif" alt=""><img
class="dragme" style="width: 59px; height: 104px;" src="static/img/flower2.gif"
alt=""><img class="dragme" style="width: 68px; height: 120px;"
src="static/img/flower1.gif" alt=""><br>
<img class="dragme" style="width: 79px; height: 64px;"
src="static/img/butter2.gif" alt=""><img class="dragme"
style="width: 229px; height: 67px;" src="static/img/grass.gif" alt=""><img
class="dragme" style="width: 250px; height: 78px;" src="static/img/grass.gif"
alt=""><img class="dragme" style="width: 81px; height: 120px;"
src="static/img/treesmall.gif" alt=""> <br>
<br>
<br>
<img class="dragme" style="width: 37px; height: 66px;"
src="static/img/flower2.gif" alt=""><img class="dragme"
style="width: 37px; height: 66px;" src="static/img/flower2.gif" alt=""><img
class="dragme" style="width: 69px; height: 56px;" src="static/img/butter2.gif"
alt=""><img class="dragme" style="width: 99px; height: 89px;"
src="static/img/butter1.gif" alt=""><img class="dragme"
style="width: 101px; height: 81px;" src="static/img/butter2.gif" alt=""><img
class="dragme" style="width: 54px; height: 96px;" src="static/img/flower2.gif"
alt=""><img class="dragme" style="width: 76px; height: 79px;"
src="static/img/ul.gif" alt=""><img class="dragme" src="static/img/ur.gif" alt=""><img
class="dragme" style="width: 130px; height: 175px;" src="static/img/rabbit3.gif"
alt=""><br>
<img class="dragme" style="width: 63px; height: 56px;"
src="static/img/butter1.gif" alt=""><img class="dragme"
style="width: 68px; height: 88px;" src="static/img/flower1.gif" alt=""><img
class="dragme" style="width: 42px; height: 75px;" src="static/img/flower1.gif"
alt=""><img class="dragme" style="width: 31px; height: 55px;"
src="static/img/flower2.gif" alt=""><img class="dragme"
style="width: 32px; height: 57px;" src="static/img/flower1.gif" alt=""><img
class="dragme" style="width: 71px; height: 102px;" src="static/img/flower1.gif"
alt=""><img class="dragme" style="width: 76px; height: 134px;"
src="static/img/flower2.gif" alt=""><img class="dragme"
style="width: 123px; height: 150px;" src="static/img/treesmall.gif" alt=""><img
class="dragme" style="width: 78px; height: 96px;" src="static/img/treesmall.gif"
alt=""><img class="dragme" style="width: 76px; height: 134px;"
src="static/img/flower2.gif" alt=""><br>
<img class="dragme" style="width: 213px; height: 241px;"
src="static/img/shapes2.gif" alt=""><img class="dragme" src="static/img/lr.gif" alt=""><img
class="dragme" src="static/img/ll.gif" alt=""> </td>
<td style="vertical-align: top;"><img class="dragme"
style="width: 314px; height: 425px;" src="static/img/treesmall.gif" alt=""><br>
<br>
<br>
<br>
<br>
<img class="dragme" style="width: 221px; height: 267px;"
src="static/img/Aliceflamingo.gif" alt=""><br>
<br>
<img class="dragme" style="width: 174px; height: 213px;"
src="static/img/treesmall.gif" alt=""> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Back to file list