Question

我的项目是一个图像处理脚本，使用php，JavaScript和imagick（或imagemagick）。

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

我希望尽可能加快这个过程。

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

欢迎任何意见和建议。

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

由于可用于更改图像的各种操作，告诉我的php脚本通过url字符串更改要更改的内容，如<img src='image.php?id=132&layer1=flip' />，网址通常会超过推荐的maximum number of characters。否则这将是理想的。

我也尝试过发送base64原始数据并对其进行处理，虽然我还没有完全排除这一点，但它有它的缺点 - 将基础64数据添加到<img>的src并不是很自然在所有浏览器中都支持

Answer 1

我不知道这是不是最好的方式，但请想一想：

您必须使用<img src="">来显示图像。现在你做了以下事情：

用户点击按钮 - ＆gt; AJAX请求服务器 - ＆gt; Ajax响应浏览器的URL - ＆gt;更改图像的src=""并进行可视化它。

将其替换为以下内容：

用户点击按钮 - ＆gt;更改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');）返回图片，浏览器将加载图像直到函数完成。

Answer 2

您可以将原始图像数据包含在JSON响应中，然后相应地解释原始数据。

Answer 3

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

虽然有一个有趣的小窍门，但这可以比你的延迟往返更多：

启动AJAX调用以生成图像
立即（无需等待结果）开始将图像刷新为PHP脚本
在这个PHP脚本中，等待图像生成完成，然后立即发送它（对图像进行长轮询排序）

这样可以节省从计算图像到创建服务器的新图像请求的时间：

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

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

3 个答案: