Upload html2canvas image to database

Question

Is it possible to upload the image html2canvas gives, to database. Bassically when i click Save, it redirects me to save.php where i can see the screenshot i made, view the image, and view the image locally on my local server.

The main question is, can a form be made, where on save.php i will be able to save the image as a random number (etc 32245652226225.jpg) into a specific folder and insert the value into database with values: img_name , img_date

Then i could retrive all the images from database, and sort them by date. I would appreciate any help.

This is the result i got

This is my index.php

  function capture() { $('#target').html2canvas({ onrendered: function (canvas) { //Set hidden field's value to image data (base-64 string) $('#img_val').val(canvas.toDataURL("image/png")); //Submit the form manually document.getElementById("myForm").submit(); } }); } 

 <form method="POST" enctype="multipart/form-data" action="save.php" id="myForm"> <input type="hidden" name="img_val" id="img_val" value="" /> </form> <input type="submit" value="Sacuvaj" onclick="capture();" /> <div id="target"> <h1>TESTING</h1> </div> 

And this is the save.php

 <?php //Get the base-64 string from data $filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1); //Decode the string $unencodedData=base64_decode($filteredData); //Save the image file_put_contents('slika.jpg', $unencodedData); ?> <h2>Screenshoot</h2> <table> <tr> <td> <a href="slika.jpg" target="blank">folder</a> </td> <td align="right"> <a href="index.php">nazad</a> </td> </tr> <tr> <td colspan="2"> <br /> <br /> <span> </span> <br /> <?php //Show the image echo $_POST['img_val']; echo '<img class="img-responsive" src="'.$_POST['img_val'].'" />'; ?> </td> </tr> </table> <style type="text/css"> body, a, span { font-family: Tahoma; font-size: 10pt; font-weight: bold; } img{ width:400px; } </style> 

Answer 1

The answer is YES ;)

I mean, it seems like you found the puzzle pieces yourself already:

• capture the screen on client
• submit that via a form to the server
• write meta info like capture date to a database which returns you unique ID numbers (any number id)
• copy the file to a folder with the filename adhering to the file ID (and appy some logic to create a new subfolder on every 4 digits of your file ID)
• have another script that helps you to search for images and to display them

If you actually ask for a free of charge coding service I am sorry to say that I cannot help you. Anyway, for database accesses there are nice tutorials out there, if you are just lacking some basic knowledge on that edge.

---

Btw. maybe rendering the html to img on server side might even be better: Convert HTML to image in php