重新加载图片而无需重新加载页面？

问题描述：

我正在做这个学习练习，我仍然是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加载图像。你甚至可以做预加载！ – www139 2014-11-23 03:19:16

PHP只会在页面在浏览器中加载之前运行一次。之后，所有你可以用PHP做的是请求一个新的页面（或者可能请求一个页面与Ajax）。在任何情况下，你想使用JavaScript进行原位页面处理。 – Octopus 2014-11-23 05:04:33

答

如果没有所有的PHP表单控件，你可能可以做任何事情。 HTML5添加，你可以把图像和处理图像数据直接使用JavaScript

<canvas></canvas>

元素。然后，您可以将这些数据在后台发送给PHP，以保存图像以供存储或下载等等。

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

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

你不需要画布对象。你可以在img标签上执行javascript。 – Octopus 2014-11-23 05:03:07

只适用于某些基本的东西。画布为您提供更大的像素操作能力。这就是它创建的原因。通过画布，您可以像使用photoshop一样在图像上绘制图像，而无法在img标签上进行绘制。 – user2782001 2014-11-23 05:19:02

谢谢，user2782001！我也会看看画布。该教程正在做一些非常酷的东西。我的项目来自一位教授，负责设计一个php图像处理类。他的目标是让我学习php，因为这是他们在内部项目中使用的。我坚持做图像处理服务器端，但我认为处理客户端页面的更新是公平的游戏。 Canvas对我来说是新的：我一定会在稍后检查这个。（我想upvote您的评论，但我没有足够的代表...） – user3687308 2014-11-23 15:21:56

答

图片重装并不复杂。忘记上传，您可以使用javascript来编辑元素的'src'属性以重新加载图像。 like： document.getElementsByTagName（“Image1”）[0] .setAttribute（“src”，“http://media-cache-ak0.pinimg.com/736x/63/50/59/635059d03e7f3a00219571c767b89c38.jpg”）;

感谢您的帮助。是否有可能实时做到这一点？也许从一个滑块的'onchange'事件触发它？ – user3687308 2014-11-23 15:07:45

重新加载图片而无需重新加载页面？

相关推荐