如何在浏览器下载之前将图像裁剪为客户端分辨率
我通常尝试自己寻找解决方案,但是对于这种特殊情况,我不知道要寻找什么来实现我的目标。
好吧,事情是这样的:我试图找到一个服务器端脚本(最好是 PHP),在浏览器下载之前将图像(背景)裁剪为客户端的屏幕分辨率。
我的目标是浏览器不必下载不适合其屏幕的图像部分。
理想情况下,如果能以中心顶部为原点进行裁剪,那就完美了。
我不太喜欢要求这样的事情,但我不知道如何自己编码,就像我说的,我不知道要搜索什么。
如果您能提供帮助,非常感谢。
I usually try to find solutions on my own, however for this particular case I don't know what to search for to reach my goal.
Alright, so here's the thing: I'm trying to find a server-side script (preferably in PHP) that crops an image (the background) down to the client's screen resolution before being downloaded by its browser.
My goal is that the browser shouldn't have to download parts of the image that won't fit in its screen.
Ideally, if it could crop using center-top as origin, it would be perfect.
I'm not a big fan of asking for such things, but I don't know how to code it myself and like I said, I don't know what to search for.
Thanks a lot if you can help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
你不可能一步完成。浏览器/窗口大小数据在标准 HTTP 请求中不可用。必须使用一些 JavaScript 来检索它并将其发送到服务器。这意味着用户必须先从您的网站加载页面,然后您才能了解有关浏览器的任何信息。该脚本可以动态重写页面中的所有图像标签,以将窗口规格作为图像 URL 的一部分
eg src="resizer.php?id=logo.jpg&x=1024&y=768"
。但是,请记住,仅浏览器大小并不能很好地确定显示环境。用户可以调整窗口大小/最大化其窗口,现在背景边缘周围有空白空间,因为它仅调整为原始窗口/桌面大小。他们可以放大/缩小页面,这再次使实际像素大小无效,等等......
而不用担心屏幕外图像部分,而是尝试通过使用压缩级别将背景的文件大小减小到尽可能小。找到一个压缩级别,使背景具有漂亮的图像质量,但文件大小也尽可能小。
You can't do it in a single step. Browser/window size data is NOT available in standard HTTP requests. It has to be retrieved using some Javascript and sent to the server. This means the user has to load a page from your site before you can know anything about the browser. The script COULD dynamically rewrite all image tags in the page to include the window specs as part of the image url
e.g. src="resizer.php?id=logo.jpg&x=1024&y=768"
.However, remember that mere browser size isn't a good determination of the display environment. The user could resize/maximize their window and now they've got empty spaces around the edges of the background because it was resized only to the original window/desktop size. They can zoom the page in/out, which again invalidates the actual pixel sizes, etc...
Instead of worrying about offscreen image portions, try to simply reduce the filesize of the background to as small as possible by playing with compression levels. Find a compression level that leaves the background at a nice looking image quality, but also as small as possible a filesize.