Question

我正在整理一个图像应用程序的REST API，以供Angular前端使用。使用PHP将API组合在一起。所有图像都安全地存储在webroot之外。

问题是我将所有图像都转换为base64，这增加了有效负载，在某些情况下，我在页面上显示40张图像，由于有效负载巨大，通常要等待30-40秒。

使用REST API呈现图像的最佳实践是什么？我进行了全面搜索，没有任何东西可以完全解决问题。下面的代码。 base64映像使有效负载膨胀得令人难以置信。任何指针。

//create presentation array
$presentation_arr=array();
$presentation_arr["records"]=array();
$LargeImageName = $slideName;
$LargefileDir = $largefolder. $fileid . '/';
$Largefile = $LargefileDir . $LargeImageName;

if (file_exists($Largefile)){
    $b64largeImage = base64_encode(file_get_contents($Largefile));
    $datafullpath = 'data:image/jpg;base64,$b64image';
}

$presentation_item=array(
    "id" => $id,
    "smallimage" => $b64image,
    "largeimage" => $b64largeImage
);

array_push($presentation_arr["imagerecords"], $presentation_item);

Answer 1

两种方法：

创建一个“包装”端点，该端点只是最终映像本身的代理（例如，内部执行readfile()，请参见：https://stackoverflow.com/a/1353867/1364793）
将图像托管在可通过Web访问的静态文件夹中（或什至将S3视为静态资产的存储）。然后，您的主要端点仅将公开可访问的URL返回给这些URL。

Answer 2

您写道，由于安全方面的考虑（包括抓取），您正在将图像作为base64编码的blob提供。

要满足此安全要求，您将在服务器端编码能力，客户端上的文件传输和渲染时间方面遭受重大性能损失。

要提高服务器端的性能，可以缓存编码版本；您可以将$ b64largeImage写入同一目录中的磁盘，检查其是否存在并将其发送给客户端。

要缩短传输时间，请确保在服务器上启用了GZIP；应该压缩您的数据。

但是，客户端性能仍然是一个问题-您的图像很可能不会在客户端上缓存，对图像进行解码（尤其是每页上有40个图像）可能会消耗大量CPU（尤其是在移动设备上）设备）。

然后，您得到一个问题，即如果浏览器可以解码图像，而attakcer / scraper也可以，并且它们可以存储该图像的副本。因此，所有这些努力并不会真的使您完全保密。

当然，您可能希望避免让第三方将您的图像嵌入到其页面中，或者您希望避免让他们轻松地刮擦图像。

在这种情况下，您可能要集中精力处理难以/不可能猜到或过期的URL。这会损害您的SEO，所以这是一个折衷。 S3具有到期的URL，或者您可以创建一个服务来检查每个请求的引荐来源网址，并且仅接受来自白名单域的图像请求，或者创建自己的到期的图像URL服务-但在每种情况下，您都将提供JPEG / GIF / PNG图片，因此文件尺寸较小且解码时间有限。

带有图像的REST API

2 个答案: