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>

Yes you can save then using PHP..Show us what you have tried so far...You must be having `BASE64` of the image to be uploaded..You can convert that data as image file over server.. — Rayon, Mar 13 '16 at 02:50
Yes sorry for the code, i will upload the rusult i got so far and the code.thank you — Elisimo, Mar 13 '16 at 02:57
Ok so i have uploaded my result image and my code. Any ideas how to solve what i need . Thank you in advance. — Elisimo, Mar 13 '16 at 03:18

score 0 · Answer 1 · edited May 23 '17 at 12:31

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

Upload html2canvas image to database

1 Answers1