javascript - 将路径 ('../mywebsite/images/$newname' ) 保存到数据库中

Question

我正在尝试制作一个网站，当用户可以使用 html2canvas 进行屏幕截图时，然后在屏幕截图完成后，用户可以将其保存到该网站。我试图遵循这个tutorial:但我失败了。它给了我这个错误:

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

因为我不知道如何在数据库中保存路径，因此:

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.

这是我的代码:

保存.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>

索引.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>

有人可以帮我吗？

Answer 1

您的代码第 9 行有一个明显的拼写错误，如果您阅读错误，您就会知道这一点。

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

应该是:

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

编辑: 看起来您正在尝试根据时间戳创建随机文件名，因此只需使用 date("U") 代替...:

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