如何在浏览器下载之前将图像裁剪为客户端分辨率

Posted 2023-02-25

【中文标题】如何在浏览器下载之前将图像裁剪为客户端分辨率

【英文标题】：How to crop an image to client resolution before download by browser

【发布时间】：2011-08-24 15:54:18

【问题描述】：

我通常尝试自己寻找解决方案，但是对于这种特殊情况，我不知道要搜索什么才能达到我的目标。

好的，事情是这样的：我正在尝试找到一个服务器端脚本（最好是 php），它可以在被浏览器下载之前将图像（背景）裁剪到客户端的屏幕分辨率。

我的目标是浏览器不应该下载不适合其屏幕的图像部分。

理想情况下，如果它可以使用 center-top 作为原点进行裁剪，那就完美了。

我不太喜欢要求这样的东西，但我不知道如何自己编写代码，就像我说的那样，我不知道要搜索什么。

如果您能提供帮助，非常感谢。

【问题讨论】：

如果每次有人访问您的网站时都必须进行图像修改，这会给您的服务器带来巨大的压力。

在我看来，你最好让他们负责整个事情。

是的，我想你是对的。只是我的设计师喜欢用大量的光影效果做大而闪亮的东西，所以它更有可能是 2560 x 1600，而不是我可以用 CSS 重复的小纹理。

【参考方案1】：

您不能一步完成。浏览器/窗口大小数据在标准 HTTP 请求中不可用。它必须使用一些 javascript 检索并发送到服务器。这意味着用户必须先从您的站点加载一个页面，然后您才能了解有关浏览器的任何信息。该脚本可以动态重写页面中的所有图像标签，以将窗口规格作为图像 url e.g. src="resizer.php?id=logo.jpg&x=1024&y=768" 的一部分。

但是，请记住，仅仅浏览器大小并不能很好地确定显示环境。用户可以调整/最大化他们的窗口，现在他们在背景边缘周围有空白空间，因为它仅调整为原始窗口/桌面大小。他们可以放大/缩小页面，这再次使实际像素大小等无效...

不要担心屏幕外的图像部分，而是尝试通过压缩级别将背景的文件大小尽可能减小。找到一个压缩级别，使背景具有漂亮的图像质量，但文件大小也尽可能小。

【讨论】：

嗯，我指的是屏幕大小，而不是浏览器窗口，而且背景将被固定，因此调整大小/缩放不会有太大问题。

我可能有一个想法：针对每个标准分辨率宽度（例如 1024 到 2560）将背景预裁剪为多个文件。高度将设置为给定宽度的最大标准高度。我不会真正关心它需要的额外尺寸。确定使用哪个背景文件可以通过 CSS 使用 @media 和 max-width 来实现。冗余可能不是最有效的解决方案，但我想它可以在不给客户端或服务器带来额外压力的情况下工作。

CSS 中不能有像“if (screen.X > 1024) background-image: url('...');”这样的条件。您仍然需要 JS 进行大小比较，然后动态设置适当的背景。