PHP/浏览器性能：由浏览器生成缩略图
用户将高分辨率图像上传到服务器。需要为此图像创建缩略图。我考虑过，与其使用 GD 密集型操作来在 PHP 中创建缩略图，这个过程实际上可以卸载到客户端/浏览器吗？如今，现代浏览器支持快速缩小图像，但我确信执行此类任务有很多缺点和优点，所以我的问题是......
- 这将是一种更有效的方法，但是比服务器端的GD操作效率高多少？
- 是否有任何 Javascript 库可以快速将图像保存为 JPG 格式，以便可以通过 Ajax 发送到服务器？
- 一般而言，转换将使用 Web Workers 完成，因此不会影响用户的浏览器。
- 显然，用户可以利用并发送与全尺寸图像完全无关的缩略图。有没有什么好的方法可以解决这个问题，即快速计算缩略图和全尺寸图像的相似程度，如果它们相似，即 98％，则允许该图像？
我知道可能有更好的方法来做到这一点，例如完全卸载到另一台服务器，或者例如在凌晨 3 点执行批处理作业，但出于学术/信息目的，随着现代浏览器及其改进的 Javascript 引擎的出现，可以工作像这样放在客户端浏览器上吗？
A user uploads a large resolution image to the server. A thumbnail needs to be created for this image. I thought about instead of having a GD intensive operation to create the thumbnail in PHP, can this process actually be off-loaded to the client/browser? Modern browers these days have support for scaling down images rapidly, but I'm sure there are many cons and pros of doing such a task, so my questions are...
- This would be a more efficient way of doing it, but how much more efficient rather than GD operation on server side?
- Is there any Javascript libraries out there that can save an image in JPG format quickly so it can be sent to the server via Ajax?
- As a general note, the conversion will be done using Web Workers, so not to affect users browser.
- Obviously the user can potetionally exploit and send a thumbnail that's completely unrelated to the full size image. Is there any good way around this, i.e. calculating quickly how alike the thumbnail and full size image is and if they are i.e. 98% alike, then allow the image?
I understand there are probably better ways of doing it, such as offloading to another server entirely, or doing a batch job at 3am for example, but for academic/informatic purposes, with the advent of modern browser and their improved Javascript engines, can work like this be put on clients browser?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
相似性计算可能不会比简单地创建快速缩小规模更快，尽管我没有代码可以立即证明这一点。
带宽是一个可能的问题，会来回发送文件。
一种可能的想法是使用 Flash/Java 小程序来处理上传、自动生成缩略图并将其发送。
The similarity calculation will likely be no faster then simply creating a quick downscale, although I don't have code to prove this right offhand.
Bandwidth comes to mind as a possible issue, sending the file back and forth.
One possible idea is using a Flash/Java applet to handle the upload, automatically generating the thumbnail and sending it along.
我一直在做的是抓取那些包含 EXIF 缩略图的图像，并只为那些不包含 EXIF 数据的图像创建真实的缩略图。
没有完全回答你的问题，但这是我的 2 美分:-)
编辑：我仍然将所有图像排队以便稍后通过 CRON 作业进行全面处理，因为它们被调整为多种尺寸 ->它只是获得我最初担心的即时缩略图。
What I've been doing is grabbing the EXIF thumbnail on those images that have it and only creating real thumbnails for those that don't contain EXIF data.
Doesn't entirely answer your question, but it's my 2 cents :-)
Edit : I still queue all images for later full processing via a CRON job as they are resized to multiple sizes -> it's just getting that immediate thumbail that I'm concerned about initially.
您是否会受到每秒如此多的上传的困扰，以至于必须将负载分配回浏览器？
ImageMagick 可以处理 调整大小 很容易，如果确实有必要的话，可以将其线程化或卸载到单独的机器上。
在尝试优化可能在网络传输开销中丢失的内容之前，您应该对其进行负载测试。
Are you going to be hammered with so many uploads per second that you have to distribute the load back out to the browsers?
ImageMagick can handle resizing easily, and that could be threaded or offloaded to a separate machine if even that much is really necessary.
You should load test this before attempting to optimize something that is probably lost in the network transfer overhead anyway.
我认为你搞乱了客户端/服务器端。 JavaScript 无法生成缩略图。如果您想委托浏览器缩放，只需设置图像的宽度/高度
I think your messing up the client / server sides. Javascript can't generate a thumbnail. if you want to delegate the browser to scaling just set the width/height of the image
感谢您的所有评论，但是我找到了一个很好的解决方案：
HTML5：使用 PHP 和 Ajax 保存画布图像数据
我将做一些进一步的测试来确定它的可行性。
显然，这里的要点/关注点是：
a.我并不认为每个人都使用相同的浏览器，并且具有相同的 canvas/html5 功能，因此后备系统应该就位。
b. 用户拥有不同性能的浏览器/计算机。因此，在处理大图像以缩小为缩略图大小时，请记住这一点。
c. 如果从浏览器/客户端发送任何垃圾数据/漏洞，那么我会在遇到这种情况时解决这个问题（事实上是的，人们可以上传全尺寸图像的垃圾数据，无论如何，如果用户的意图是首先搞砸网站，他们总会找到办法）
我将进行一些测试以查看性能改进并在此处报告。
Thanks for all your comments however I've found a good solution to this:
HTML5: Saving Canvas Image Data Using PHP And Ajax
I'll do some further testing to work out it's feasability.
Obviously the main points/concern here are:
a. I'm under no delusion that everyone is using the same browser, and with the same canvas/html5 capabilities, so a fallback system should be in place.
b. Users have different performing browsers/machines. So this is something to keep in mind when working with large images to scale down to thumbnail size.
c. Should any garbage data/exploit be sent from the browser/clients then I'll work around that when it comes to it (the fact is, people could upload garbage data for the full size image, anyway, and if that users intention is to screw up the site in the first place, they'll always find a way)
I'll do some testing to see performance improvements and report back here.