如何使用原始照片的其他较小变体将同一图像存储两次

Question

我正在使用 jQuery Fancybox Plugin，效果很好。问题是我不喜欢在页面加载时加载原始图像及其大小的事实。我需要以某种方式在页面加载时以及单击以显示原始图片时加载此图片的较小变体。说到fancybox，这很容易做到。但是较小变体的存储过程让我感到困惑。上传时，我将存储 2 张图像 - 原始图像和调整大小（较小的变体）图像。包含照片较小变体的 div 设置为 max-width:500px;max-height:150px;，这就是应如何调整较小变体照片的大小。 500px 的最大宽度和 150px 的最大高度。另一个问题是如何保存图像的纵横比？我将如何确定是否需要存储第二张（较小的）照片。我很困惑。我在等你的回复。提前致谢。

较小的变体

原始版本 - fancybox opened

我正在使用 Image Intervention。

我的项目在 Laravel 8.

Answer 1

是的，您需要在存储设备上存储 2 张图像。

您需要根据图像的主要纵横比定义宽度或高度。检查下面的代码

// open an image file
$img = Image::make('public/foo.jpg');

// now you are able to resize the instance with maintaining aspect ratio
$img->resize(300, null, function ($constraint) { $constraint->aspectRatio(); });


// finally we save the image as a new file
$img->save('public/foo_sm.jpg');

我个人比较喜欢spatie media package（后面用图片介入）。它使用多态关系处理单独 table 上的媒体。看看文档，太神奇了

https://spatie.be/docs/laravel-medialibrary/v10/introduction

如何使用原始照片的其他较小变体将同一图像存储两次

How to store the same image twice with additional smaller variant of the original photo

image

fancybox

laravel