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

4

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

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

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

理想情况下,处理php脚本将能够在处理完更改后直接输出原始图像数据,并带有适当的mime头,但由于需要发送json响应的相同文件,这不能完成。

欢迎任何意见和建议..

编辑:我应该提到我到目前为止尝试过什么:

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

我也尝试过发送base64原始数据并进行处理,虽然我还没有完全排除这个方法,但它有缺点-在所有浏览器中都不自然地支持将base 64数据添加到的src中。


1
好的链接:https://dev59.com/_HVC5IYBdhLWcg3wlyIo 和 http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/ - Eliseu Monar dos Santos
第一个链接不是可行的选择,因为它需要跨浏览器兼容性。推荐第二个链接,虽然它只适用于PNG格式。 - digout
3个回答

2

我不知道这是否是最好的方法,但请考虑以下内容:

您需要使用<img src="">来显示您的图像。现在您可以执行以下操作:

  • 用户单击按钮 -> 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');),浏览器会在函数完成之前加载该图片。


谢谢您的回答,我之前考虑过这个选项,但是用户可以执行许多不同的操作,通常URL最终会变成2000-3000个字符长,这将使其无法跨浏览器兼容。 - digout
2000-3000个字符?有没有可能缩短一下?我不认为这是不可能的;)也许我可以帮你解决这个问题:D - Neysor
该图像代表了一组层,每个层都有一系列属性,如定位、旋转、颜色、大小、样式,最重要的是——文本。实际上,层数没有限制,但合理地说,我认为这不会超过20层,同样,每个层中的文本可以轻松地达到20到200个字符的长度。 - digout
1
但是您并不每次都发送完整的信息,对吗?您可以缓存所有没有更改信息的层,然后只需发送差异。这将更快,并缩短请求时间。如果仅有少数操作无法实现这一点,您可以通过在脚本中进行检查来处理它们。 - Neysor
我可能跳过了这个步骤 - 在我的项目中,我开始发送一个标志和仅适用于该标志的数据,例如“移动”,然后提供x和y位置,然后使用$_SESSION来保存图层信息并调用其余的图层。这是你的意思吗?我认为我最终回到了“每次处理”的方法,因为当时我没有很多属性可以修改,但现在已经有所增加了。 - digout
我是指那样的东西,抱歉现在我不知道你还能做什么;) 但我会考虑一下。也许我以后会有想法;) - Neysor

1

你可以将原始图像数据作为JSON响应的一部分包含,并相应地解释该原始数据。


应该说我已经尝试过这个了。目前这是最好的无奈之选。 - digout

1

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

然而,有一个有趣的小技巧可以减少延迟:

  • 开始AJAX调用以生成图像
  • 立即(无需等待结果)启动到PHP脚本的图像刷新
  • 在此PHP脚本中,等待图像生成完成,然后立即发送它(类似于长轮询图像)

这样,您就可以节省从计算图像到新图像请求到达服务器的时间:

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

我会试一试,如果图像处理失败,我将不得不调整我的错误处理代码,但如果它能加快处理速度,那就没问题。 - digout
在我尝试之前,如果在 PHP 脚本有机会保存更新后的图像之前刷新图像,会不会出现问题? - digout
这正是关键所在:PHP脚本必须等待图像生成完成。 - Eugen Rieck

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接