Tengo una imagen principal, luego una imagen secundaria que coloco sobre la imagen principal. Luego quiero tomar una foto del DIV y guardar la imagen en una carpeta de correo electrónico. Cuando ejecuto la página, obtengo un error de referencia no capturado: $ no está definido: capture3.php: 23: 5. Que hace referencia al error en la línea 23. $('#takeshot').on('click', function() { No soy tan bueno con Javascript y Ajax. Pero sé que esto no llega a la página de PHP. Gracias en avance para cualquier ayuda.
capturar3.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>capturar_imagen_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"; } }