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


How to crop an image to client resolution before download by browser

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

好了,事情是这样的:我试图找到一个服务器端脚本(最好是PHP),在被浏览器下载之前,将图像(背景)裁剪到客户端的屏幕分辨率。

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

理想情况下,如果可以使用center-top作为原点进行裁剪,那将是完美的。

我不是一个大粉丝要求这样的东西,但我不知道如何编写自己,就像我说的,我不知道要搜索什么。

如果你能帮忙的话,非常感谢。

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

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

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