【问题标题】:Reload Image without Reloading Page?重新加载图像而不重新加载页面?
【发布时间】:2015-01-21 00:04:58
【问题描述】:

我将其作为一个学习练习,我仍然是 PHP 的初学者。我对javascript的了解更少:

我正在编写的脚本应该允许用户从他们的硬盘上传图像,允许用户通过页面上的一些控件对其进行修改,然后显示修改后的图像。

目前,我只使用 PHP 来执行此操作,它需要用户设置控件的参数,然后发布它们(需要重新加载完整的页面)。有人可以为我指出一个更好的方法吗?有没有类似的东西我可以看看?

如果我最终能够在用户滑动控件时实时更新图像,那就太好了。我在寻找 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>

【问题讨论】:

  • 尝试使用 javascript 加载图像。您甚至可以进行预加载!
  • PHP 只会在页面加载到浏览器之前运行一次。之后,你可以用 php 做的就是请求一个新页面(或者用 ajax 请求一个页面)。在任何情况下,您都想使用 javascript 进行原位页面处理。

标签: php html image post reload


【解决方案1】:

您可以在没有所有 PHP 表单控件的情况下做任何您想做的事情。 HTML5 增加了一个

<canvas></canvas> 

元素,您可以将图像放入其中并直接使用 JavaScript 操作图像数据。然后您可以在后台将该数据发送到 PHP 以保存图像以供存储或下载或其他任何方式。

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

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

【讨论】:

  • 你不需要画布对象。你可以在 img 标签上执行 javascript。
  • 只针对某些基本的东西。 Canvas 为您提供更强大的像素操作能力。这就是它被创建的原因。使用画布,您可以像在其 Photoshop 中一样在图像上绘图,而这是在 img 标签上无法做到的。
  • 谢谢,user2782001!我也会研究一下画布。该教程正在做一些非常酷的事情。我的项目来自一位教授,他让我设计一个 php 图像处理类。他的目标是让我学习 php,因为这是他们在内部项目中使用的。我一直在做图像处理服务器端,但我认为在客户端处理页面更新是公平的游戏。 Canvas 对我来说是一个新的:我以后肯定会检查一下。 (我想支持你的评论,但我没有足够的代表......)
  • 谢谢,八达通。请参阅我上面的评论,了解我为什么要使用 php 执行此操作。经过一番阅读,看起来我想要做的是使用 javascript 调用我的 php imagefilter 函数,使用滑块上的 onchange 事件作为触发器。之后,看起来我想使用 AJAX 重新加载图像。这一切看起来可行吗?我很难找到其他人这样做的例子。我通常认为这是我使用错误或特殊方法的标志。
  • 在阅读了更多内容之后:看起来我需要 AJAX 来处理整个事情。我开始更好地掌握 javascript 和 php 之间的关系(或缺乏)。我认为我可以使用 javascript 来触发新的服务器请求。我显然需要了解 AJAX。我会不会在这里要求一个例子或一个类似的链接?我真的不知道将它转换为使用 AJAX 会涉及多少代码。
【解决方案2】:

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

【讨论】:

  • 感谢您的帮助。是否可以实时执行此操作?也许从其中一个滑块的“onchange”事件触发它?
猜你喜欢
  • 2014-02-14
  • 2014-01-08
  • 1970-01-01
  • 2012-06-15
  • 2013-09-18
  • 2016-04-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多