user7176800 user7176800 - 18 days ago 4
Javascript Question

Save path ('../mywebsite/images/$newname') in your database

I am trying to make a website, when user can make a screenshot using html2canvas and then after the screenshot is made, the user can save it to that website. I tried to follow this tutorial: but I failed. It gives me this error:


Fatal error: Uncaught Error: Call to undefined function strototime()
in /data/web/virtuals/148842/virtual/www/save.php:9 Stack trace: #0
{main} thrown in /data/web/virtuals/148842/virtual/www/save.php on
line 9


Because I dont know how to save path in my database, acording this:


When you save the image with the code I shared, (Line:
file_put_contents('img.png', $unencodedData);), there's an actual
image on the server named "img.png".

All you have to do is move it to wherever you want with
move_uploaded_file() function like this: move_uploaded_file('img.png',
'../mywebsite/images/$newname');

Then save the new path ('../mywebsite/images/$newname') in your
database so you can access it later.


This is my code:

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('img_' . strototime() . '.png', $unencodedData);

move_uploaded_file('img.png', './posters/$newname');

?>
<h2>Save the image and show to user</h2>
<table>
<tr>
<td>
<a href="img.png" target="blank">
Click Here to See The Image Saved to Server</a>
</td>
<td align="right">
<a href="index.php">
Click Here to Go Back</a>
</td>
</tr>
<tr>
<td colspan="2">
<br />
<br />
<span>
Here is Client-sided image:
</span>
<br />
<?php
//Show the image
echo '<img src="' . $_POST['img_val'] . '" />';
?>
</td>
</tr>
</table>
<style type="text/css">
body, a, span {
font-family: Tahoma; font-size: 10pt; font-weight: bold;
}
</style>


Index.php

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>

<h2>Simple Implementation of html2canvas With JavaScript and PHP</h2>

<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
<table>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td>
<input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" />
</td>
<td align="right">
<a href="http://www.kubilayerdogan.net?p=304" style="font-family: Tahoma; font-size: 10pt; font-weight: bold;">
Documentation (Back to Site)</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="padding: 10px;">
<b>Div:</b>
</td>
<td>
<div id="target">
<table cellpadding="10">
<tr>
<td colspan="2">
This is sample implementation
</td>
</tr>
<tr>
<td>
It can hold form values:
</td>
<td>
<input type="text" name="form_value" value="" placeholder="Try me" />
</td>
</tr>
<tr>
<td>
Simple Button Element:
</td>
<td>
<button name="my_button">
Clicking Me Useless</button>
</td>
</tr>
<tr>
<td valign="top">
Let's go with CSS:
</td>
<td>
<div id="aside">
<h3>Aside heading</h3>
<p>Duis autem vel eum iriure dolor in hendrerit!</p>
</div>
<div id="more">
<h2>My first styled page</h2>
<p>Welcome to my styled page!</p>
<p>It lacks images, but at least it has style.</p>
<p>There should be more here, but I don't know what yet.</p>
<address>
Made 5 April 2004
<br />
by myself.
</address>
</div>
</td>
</tr>
<tr>
<td>
Try Image:
</td>
<td>
<img src="soc.jpeg" alt="SOC" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
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();
}
});
}
</script>
<style type="text/css">
#target {
border: 1px solid #CCC;
padding: 5px;
margin: 5px;
}
h2, h3 {
color: #003d5d;
}
p {
color:#AA00BB;
}
#more {
font-family: Verdana;
color: purple;
background-color: #d8da3d;
}
</style>


Can anyone please help me?

Answer

You have a blatant typo on line 9 of your code, if you read the error you would know this.

file_put_contents('img_' . strototime() . '.png', $unencodedData);

Should be:

file_put_contents('img_' . strtotime() . '.png', $unencodedData);

Edit: Looks like you are trying to create a random filename based on a timestamp, so just use date("U") instead...:

file_put_contents('img_' . date("U") . '.png', $unencodedData);