Question

我这样做是为了学习练习，而且我还是PHP的初学者。我对javascript的了解甚少：

我写的脚本应该允许用户从硬盘上传图像，允许用户通过页面上的某些控件修改它，然后显示修改后的图像。

目前，我只使用PHP来执行此操作，它要求用户设置控件的参数然后POST它们（需要完整的页面重新加载）。有人能指出我更好的方法吗？有没有这样的东西我可以看看？

如果我最终可以在用户滑动控件时实时更新图像，那就太棒了。我在寻找javascript吗？ AJAX？

以下是我的代码的基本版本：

<?php session_start(); ?>
<html>
    <head>
        <script>
            <?php
                if(isset($_POST['upload_submit'])) { // PROCESS UPLOAD FORM//////////////////////////////////////////////////////
                    $tmp_file = $_FILES['file_upload']['tmp_name'];
                    $filename = basename($_FILES['file_upload']['name']);
                    $_SESSION['file_name'] = $filename; // load filename into SESSION so that it survives page reloads from POST
                    move_uploaded_file($tmp_file, $filename);
                }

                if(isset($_POST['process_submit'])){ // PROCESS CONTROL FORM//////////////////////////////////////////////////////
                    $im = imagecreatefromjpeg($_SESSION['file_name']);
                    imagefilter($im, IMG_FILTER_COLORIZE, $_POST['colred'], $_POST['colgreen'], $_POST['colblue'], $_POST['colalpha']);
                    imagejpeg($im, "newimage.jpg"); //output to file 
                    imagedestroy($im); // free memory
                    $_SESSION['Modified'] = TRUE; // flag that the image has been modified so that the page will display newimage.jpg instead of original
                }
            ?>
        </script>
    </head>
    <body>
        <?php
            if(isset($_SESSION['Modified'])){ // Image has been modified at least once (display modified image. do not display upload form)
                echo("<img src='newimage.jpg' width='400px'><br />");
            }elseif(isset($_FILES['file_upload']['name'])) { // Image has been uploaded but not yet modified (do not display upload form)
                echo("<img src=$filename . ' 'width=400px'><br />");
            } else { // FIRST State that the form is in when the page is loaded. (No image uploaded so display upload form)
                echo("<form action='index.php' enctype='multipart/form-data' method='POST'>
                    <input type='file' name='file_upload' />
                    <input type='submit' name='upload_submit' value='Upload' />
                </form>");
            } 

            echo("<form action='index.php' method='post'><br />");  // display form with 4 slider controls (Red, Green, Blue, Alpha) and a submit button
                echo("<table>");
                    echo (isset($_POST['colred'])) ? "<tr><td>Red:</td><td> 0<input type='range' name='colred' min='0' max='255' value=" . $_POST['colred'] . ">255</td></tr>"
                        :"<tr><td>Red:</td><td> 0<input type='range' name='colred' min='0' max='255'>255</td></tr>";
                    echo (isset($_POST['colgreen'])) ? "<tr><td>Green:</td><td> 0<input type='range' name='colgreen' min='0' max='255' value=" . $_POST['colgreen'] . ">255</td></tr>"
                        : "<tr><td>Green:</td><td> 0<input type='range' name='colgreen' min='0' max='255'>255</td></tr>";
                    echo (isset($_POST['colblue'])) ? "<tr><td>Blue:</td><td> 0<input type='range' name='colblue' min='0' max='255' value=" . $_POST['colblue'] . ">255</td></tr>"
                        : "<tr><td>Blue:</td><td> 0<input type='range' name='colblue' min='0' max='255'>255</td></tr>";
                    echo (isset($_POST['colalpha'])) ? "<tr><td>Alpha:</td><td> 0<input type='range' name='colalpha' min='0' max='255' value=" . $_POST['colalpha'] . ">127</td></tr>"
                        : "<tr><td>Alpha:</td><td> 0<input type='range' name='colalpha' min='0' max='255' value='127'>255</td></tr>";
                echo("</table>");
                echo("<button name='process_submit'>Process</button>");
            echo("</form>");
        ?>
    </body>
</html>

Answer 1

与上传过程相比，图像重新加载并不复杂。忘记上传，您可以使用javascript编辑＆＃39; src＆＃39;要重新加载图像的元素的属性。喜欢： document.getElementsByTagName（＆＃34; Image1＆＃34;）[0] .setAttribute（＆＃34; src＆＃34;，＆＃34; http://media-cache-ak0.pinimg.com/736x/63/50/59/635059d03e7f3a00219571c767b89c38.jpg＆＃34;）;

Answer 2

如果没有所有PHP表单控件，您可以完成所需的一切。 HTML5添加了

<canvas></canvas>

元素，您可以直接使用JavaScript将图像放入和操作图像数据。然后，您可以在后台将这些数据发送给PHP，以保存图像以便存储或下载等等。

有关使用javascript编写的图像过滤器的一些示例，请参阅http://www.html5rocks.com/en/tutorials/canvas/imagefilters/。您还可以使用javascript和canvas轻松裁剪，旋转，缩放等。

http://jsfiddle.net/av01d/FT7a9/

重新载入图像而不重新加载页面？

2 个答案: