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


Quickest way to output image from an ajax call

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

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

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

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

欢迎任何意见和建议。。

编辑:我应该提到我迄今为止所做的尝试:

由于可用于更改图像的操作种类繁多,通过<img src='image.php?id=132&layer1=flip' />等url字符串告诉我的php脚本要更改什么,url通常会超过建议的最大字符数。否则,这将是理想的。

我还尝试过将base64原始数据发送回并进行处理,尽管我还没有完全排除这种可能性,但它也有缺点——并非所有浏览器都自然支持将base64数据添加到<img>的src中。

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

你必须用CCD_ 3来形象化你的形象。现在您可以制作以下内容:

  • 用户点击按钮->AJAX请求到服务器->AJAX响应URL到浏览器->更改图像的src=""并可视化它

将其替换为以下内容:

  • 用户点击按钮->更改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>

所以你通过picid传输到你的php文件,你的意思是,do说你想调用什么函数,what在这个例子中是你想旋转的度数。您的PHP文件必须返回一个带有正确标题的图片(例如,header('Content-Type: image/jpeg');),浏览器将加载图像,直到函数完成。

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

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

不过,有一个有趣的小技巧,它可以减少你的延迟:

  • 启动AJAX调用以生成图像
  • 立即(无需等待结果)开始将图像刷新为PHP脚本
  • 在这个PHP脚本中,等待图像生成完成,然后立即发送(有点像图像的长轮询)

通过这种方式,您可以节省从计算图像到服务器上收到新图像请求的时间:

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