I have an main image, then a secondary image that I lay over the top of the main image. I then want to take a picture of the DIV and save the image to an email folder. When I execute page I get Uncaught ReferenceError: $ is not defined: capture3.php:23:5. Which references the error in line 23. $('#takeshot').on('click', function() { I am not so good with Javascript and Ajax. But I know this is not getting to the PHP page. Thanks in advance for any help.
capture3.php
<!DOCTYPE html>
<html>
<head>
<title> How to take screenshot of a div and upload image to databast using JavaScript?</title>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="image">
<img src="images/10137-Charcoal-2-91MCharcoalModelBack-1200W.jpg" />
<img src="knife_river.png" style="margin-top:-400px;margin-left:-200px" />
<br><br>
<button id="takeshot" onclick="takeshot();">
Take Screenshot and save to email folder
</button>
<br><br>
</div>
<h1>Screenshot:</h1>
<div id="output"></div>
</body>
<script type="text/javascript">
$('#takeshot').on('click', function() {
var file_data = $('#output').prop('files')[0];
var form_data = new FormData(); // Create a FormData object
form_data.append('file', file_data); // Append all element in FormData object
$.ajax({
url : 'capture_image_script.php', // point to server-side PHP script
dataType : 'text', // what to expect back from the PHP script, if anything
cache : false,
contentType : false,
processData : false,
data : form_data,
type : 'post',
success : function(output){
alert(output); // display response from the PHP script, if any
}
});
$('#output').val(''); /* Clear the input type file */
});
// Define the function
// to screenshot the div
function takeshot() {
let div = document.getElementById('image');
// Use the html2canvas
// function to take a screenshot
// and append it
// to the output div
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
})
}
</script>
</html>
capture_image_script.php
<?php
if ( $_FILES['file']['error'] > 0 ){
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
if(move_uploaded_file($_FILES['file']['tmp_name'], 'images/email/' . $_FILES['file']['name']))
{
echo "File Uploaded Successfully";
}
}