Php 从ajax调用输出图像的最快方法

Php 从ajax调用输出图像的最快方法,php,javascript,ajax,imagemagick,imagick,Php,Javascript,Ajax,Imagemagick,Imagick,我的项目是一个图像处理脚本,使用php、JavaScript和imagick(或imagemagick) 目前,用户可以使用浏览器更改图像的属性,然后jscript向我的php脚本发送Ajax调用以处理更改,重新保存图像,并将文件路径和响应发送回浏览器,以便jscript可以刷新img标记 如果可能的话,我希望能加快这个过程 理想情况下,处理php脚本将能够在处理更改后直接输出原始图像数据,并使用适当的mime头,但这无法完成,因为同一个文件需要发送json响应 欢迎提出任何意见和建议 编辑:我

我的项目是一个图像处理脚本,使用php、JavaScript和imagick(或imagemagick)

目前,用户可以使用浏览器更改图像的属性,然后jscript向我的php脚本发送Ajax调用以处理更改,重新保存图像,并将文件路径和响应发送回浏览器,以便jscript可以刷新img标记

如果可能的话,我希望能加快这个过程

理想情况下,处理php脚本将能够在处理更改后直接输出原始图像数据,并使用适当的mime头,但这无法完成,因为同一个文件需要发送json响应

欢迎提出任何意见和建议

编辑:我应该提到我到目前为止尝试过的内容:

<img src="image.php?picid=123123" id="#image"><button id="#rotate90">rotate</button>
<script>
$("#rotate90").click(function(){
  $("#image").attr("src","image.php?picid='123123'&do=rotate&what=90");
}
</script>
由于可用于更改图像的操作种类繁多,因此通过url字符串(如
)告诉我的php脚本要更改什么,url通常会超过建议的值。否则这将是理想的


我还尝试将base64原始数据发回并进行处理,尽管我还没有完全排除这一点,但它也有其缺点-并非所有浏览器都支持将base64数据添加到
的src中

您可以将原始图像数据作为JSON响应的一部分,然后相应地解释原始数据。

我很确定,这不会导致加速:您需要编码图像数据,将其附加到JSON,在客户端解码,然后绘制。此外,将图像数据编码为JSON可能会导致大量数据通过网络传输,从而抵消任何加速,即使有加速

不过,有一个有趣的小技巧,它可以让你的延迟减少一点,而不仅仅是一次往返:

  • 启动AJAX调用以生成图像
  • 立即(不等待结果)开始对PHP脚本进行图像刷新
  • 在这个PHP脚本中,等待图像生成完成,然后立即发送(类似于对图像的长轮询)
通过这种方式,您可以节省从计算映像到新映像请求到达服务器的时间:

  • 正在组装的结果
  • HTTP处理的返回阶段
  • 下游网络延迟
  • 客户端上的处理时间
  • 新映像请求的上行网络延迟
  • 新映像请求的HTTP处理时间

    • 我不知道这是否是最好的方法,但请想想:

      您必须使用
      可视化图像。现在你要做以下几点:

      • 用户单击按钮->服务器的AJAX请求->带有 浏览器URL->更改图像的
        src=”“
        ,并可视化 它
      将其替换为以下内容:

      <img src="image.php?picid=123123" id="#image"><button id="#rotate90">rotate</button>
      <script>
      $("#rotate90").click(function(){
        $("#image").attr("src","image.php?picid='123123'&do=rotate&what=90");
      }
      </script>
      
      • 用户单击按钮->更改php文件的
        src=”“
        ,该文件 处理操纵并在准备就绪时显示
      给你一些解释代码:

      <img src="image.php?picid=123123" id="#image"><button id="#rotate90">rotate</button>
      <script>
      $("#rotate90").click(function(){
        $("#image").attr("src","image.php?picid='123123'&do=rotate&what=90");
      }
      </script>
      
      旋转
      $(“#旋转90”)。单击(函数(){
      $(“#image”).attr(“src”、“image.php?picid='123123'&do=rotate&what=90”);
      }
      

      因此,您可以通过
      picid
      传输到php文件,您的意思是说,
      do
      表示您要调用的函数,以及
      在示例中要旋转的度数。您的php文件必须返回带有正确标题的图片(例如,
      标题('Content-Type:image/jpeg');
      )浏览器将加载图像直到功能完成。

      好链接:第一个链接不是一个选项,因为它需要跨浏览器友好,+1表示第二个链接,因为它很有趣,但只适用于PNG。我会尝试一下,如果图像处理失败,我将不得不调整错误处理代码,但如果它能加快速度一点的话那没问题。在我尝试之前,如果在php脚本有机会保存更新后的图像之前刷新图像,会不会有问题?这正是问题的关键:php脚本必须等待图像生成完成。应该说我已经尝试过了。目前这是一个总比没有好的选项。谢谢你的回答,我很久以前就考虑过这个选项,但是用户可以执行许多不同的操作,通常url的长度是2000-3000个字符,这使得它不能跨浏览器兼容。2000-3000个字符?有没有可能缩短它?我认为这是不可能的;)也许我可以帮你解决这个问题:数据图像代表一组层,每一层都有一组属性,如定位、旋转、颜色、大小、样式和文本。层的数量确实没有限制,但从理智上讲,我看不出这会超过20层,再说一遍,每层中的文本长度可以很容易地从20到200个字符不等。但是你不会每次都发送全部信息,是吗?您可以缓存所有没有变化信息的层,然后只需发送差异。这将大大加快并缩短请求时间。如果这仅仅对于一些操作来说是不可能的,你可以通过在脚本中检查来处理。我可能已经跳过了这一步-我在我的项目中早些时候开始发送一个带有每个请求的标志,并且只发送标志应用到的数据,即“移动”,然后提供x和y位置,然后使用$\u会话保存图层信息并调用其余图层。这就是你的意思吗?我想我最终还是回到了“每次处理”的方法,因为当时我没有太多的属性需要修改,现在已经增加了一些东西。。