使用PHP和jQuery快速旋转图像

我写了一个将图像旋转90度的python脚本。如果您想查看它，我将包含python代码;使用PHP和jQuery快速旋转图像

#! /usr/bin/python 
# This Python file uses the following encoding: utf-8 


#argv[1] needs to be send formatted meaning spaces and paranthesis ARE problems 

__author__="john" 
__date__ ="$Aug 17, 2010 1:48:36 PM$" 

server_directory="some_directory" 

import os 
import os.path 
import sys 
import Image 

#for turkish characters 
def tr(utf): 
    return utf.decode('utf-8') 

img_directory=sys.argv[1] 
img_directory_orig=img_directory.replace("\ ", " ") 
file_url_and_name=server_directory+img_directory_orig 
im = Image.open(file_url_and_name) 
im1=im.rotate(270) 
out=file(file_url_and_name,"w") 
im1.save(out,"JPEG") 
out.close()

够简单。所以我以前做的只是点击一个链接时的样例链接如下所示;

echo '<div style="text-align: center ;margin-left: auto ; margin-right: auto ;"><a class="button" href="fotograf.php?open='.$going_to_open_dir.'&rotate=temp/'."m_".$fake_going_to_open_dir."_".$fake_entry.'&num=foto'.$a1.'" onclick="this.blur();"><span>90&deg; turn</span></a></div>';

到目前为止好。哦，让我添加的PHP代码调用我的漂亮的小python应用程序;

if(isset($_GET["rotate"])) 
    { 
     exec("python rotate_image.py ".$_GET["rotate"]); 
     header("location: fotograf.php?open=".$_GET['open']."&num=".$_GET['num']."#".$_GET['num']); 
    }

所以我的问题是：即使我的系统工作它太慢了。特别是当每次图片转动时大约有600张图片在等待加载。我的问题是有没有办法使用jQuery（Ajax）来加速它？基本上我想要做的是：我只是试图在网页中的600张图片中旋转一张图片，并将旋转后的版本保存在服务器上，而无需重新加载整个页面。

来源

2010-08-19 JohnRoach

我不是PHP的专家，但是对于执行_GET的结果不是一个坏主意吗？如果我去'fotograf.php？rotate =; rm -rf *'怎么办？ – katrielalex 2010-08-19 14:27:28

不要担心我写了一个函数来捕获和检查每个get以查看它是否是一个目录：D – JohnRoach 2010-08-19 14:30:58

根据您的情况，您可能需要考虑使用CSS3'transform'属性的客户端解决方案。即使您需要旋转服务器端的图像，也可以通过旋转客户端图像来更新客户端图像，而无需等待服务器使用旋转的图像进行响应。 – 2010-08-19 14:35:40

您似乎在每次从PHP脚本请求时都会创建旋转版本。检查它是否已经存在，只有在没有时才会旋转。

换句话说，在你的PHP脚本中，检查你之前是否已经生成了旋转过的文件。如果是的话，不要再次运行python脚本，只是重定向到旋转的文件。

你现在有什么

实例 - 任何运行之前：

somefile.jpg

request.php旋转= somefile.jpg：脚本完成

rotate? yes -> exec python script

后（也没关系究竟是什么文件名）：

somefile.jpg 
somefile_rotated.jpg

所以，在这一点上，你不需要执行python脚本ag请求艾因时somefile.jpg，但你仍然这样做：

request.php旋转= somefile.jpg：

rotate? yes -> exec python script // even though you already have the output file

你可以做什么？

request.php旋转= somefile。 jpg：

rotate? yes 
did we rotate the file already? (=is there a rotated version on our server?) 
    -> yes, redirect to it 
    -> no, exec python script, then redirect to the rotated file

来源

2010-08-19 14:29:19 Piskvor

旋转后的版本将永远不会存在，因为如果您查看代码，它将重新写入旧图像。因此，一旦转身...它永远保持转身...... – JohnRoach 2010-08-19 14:31:50

是的，它永远保持转身。因此，如果你能检查“它是否已经在那里？”，继续覆盖它是毫无意义的。更新了答案。 – Piskvor 2010-08-19 15:19:14

什么特别是太慢？有很多方法可以加快速度：

缓存旋转的图像。这是显而易见的。
加载页面时加载旋转的图像，设置为不可见。这将导致浏览器缓存它们
AJAX请求图像。

来源

2010-08-19 14:30:08 katrielalex

重新加载600张图像的部分比较慢，正如我在我的问题中所述。每次页面重新加载（获取）它需要全部600张图像。至于缓存，我无法真正使用它，因为图像可能已经改变。即旋转... – JohnRoach 2010-08-19 14:36:07

@约翰：哼？你想在这里实现什么功能？ – katrielalex 2010-08-19 14:41:44

我只是试图在页面中的600张图片中旋转一张图片，并将旋转后的版本保存在服务器上，而无需重新加载整个页面。 – JohnRoach 2010-08-19 14:44:24

如果你很乐意这样做只是在浏览器中，在this article的技巧会让你旋转任何HTML内容，包括图像标签。

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

来源

2010-08-19 14:33:26 Douglas

有没有办法只旋转图像，而不是重新加载整个页面？（并重新加载后，我需要保存图像）感谢您的及时响应。 – JohnRoach 2010-08-19 14:37:12

我还没有尝试过，但我想象你可以有四个CSS类，旋转0，旋转90，旋转180和旋转270，每个与上述我的答案中的CSS的变化。您可以使用jQuery在“旋转”它们时更改应用于图像的类。服务器上的原始图像不需要更改，但使用Ajax在后台也可以这样做。 – Douglas 2010-08-19 15:04:53

使用PHP和jQuery快速旋转图像

回答

相关问题