使用 Codeigniter 进行图像的最佳实践:生成拇指或动态调整大小
我知道已经有很多关于 CI 缩略图生成等方面的文章,但我想解释一下我所做的事情,看看我能找到什么样的最佳实践建议。这是我的故事......
目前,我有一个网站,允许用户将照片集上传到他们在首次创建帐户后创建的项目。创建帐户后,网站会按照以下方式为五个预定义项目中的每一个项目生成用户文件夹:
/students/username/project_num/images/thumbs/
(这就是说,在预先创建的学生文件夹中,用户名、project_num、图像和拇指文件夹递归创建五次。)
当用户将图像上传到项目时,我有一个图库控制器,它将完整图像上传到project_num的图像文件夹中,然后创建一个较小的缩略图,该缩略图维护它的比例。到目前为止,一切都很好。
在网站的索引页面上,显示这些缩略图和完整图像,我有点脑子昏了,以为我可以简单地输出完整图像,同时通过 css 调整其大小以获得“中等大小”图像,这会导致单击时显示为全尺寸图像。
(明确一下,路径是:点击缩略图——>通过ajax加载缩放后的全尺寸(中尺寸)图片到大拇指上方的显示区域——>点击中尺寸图片——>加载全尺寸图片通过灯箱或类似的东西。)
到目前为止,我已经完成了所有工作,除了,正如人们想象的那样,使用 css 调整全尺寸图像的大小并不能保持拇指的纵横比,这意味着我需要找到调整这些大小的最佳方法。
在思考这个问题时,我认为我有两个选择:
当用户单击缩略图通过 ajax 加载中等大小的图像时,我可以动态调整图像的大小。 (我的画廊控制器中有一个方法“get_image($url)”,它只是加载带有图像标签的视图以及传递给它的图像源等。)我想也许我可以先将其发送到我的画廊模型,调整大小它即时存在,并将其发送到视图中。我遇到的问题是,动态调整它的大小并回显它给了我原始图像数据(我很抱歉,我不知道这是正确的术语)。我尝试使用 data_uris 将原始数据格式化为可回显的内容,但没有成功。这种方法可能吗?
我考虑的第二个选项是当用户上传图像并将maintain_ratio设置为true时生成第二个中等大小的缩略图。这种方法稍微不太理想,因为当为用户提供删除项目的方法时,我需要扫描一组额外的图像来删除。当然,这没什么大不了的,但我认为可以通过动态生成中等大小的图像来避免这种情况。
我希望我的解释很清楚,即使很啰嗦!我很好奇人们对处理这个问题的最佳方法有什么建议。
非常感谢您的阅读,非常感谢任何建议!
史蒂夫·K.
I know there’s been a good deal written on thumbnail generation and the like with CI, but I wanted to explain what I’ve made and see what kind of best-practice advice I could find. Here’s my story…
Currently, I have a site which allows users to upload collections of photos to projects they’ve created after first creating an account. Upon account creation, the site generates folders for the users in the following fashion for each of five pre-defined projects:
/students/username/project_num/images/thumbs/
(This is to say that within a pre-created students folder, the username, project_num, images and thumbs folders are created recursively five times.)
When a user uploads images to a project, I have a gallery controller which uploads the full images into the images folder for the project_num, and then creates a smaller thumbnail which maintains its ratio. So far so good.
On the index page of the site, where these thumbnails and full images are displayed, I had a bit of a brain lapse, thinking I could simply output the full image while resizing it via css for a ‘medium-size’ image which would lead to the full-size image when clicked.
(To be clear, the path is: Click on thumbnail—> Load scaled full-size (medium-size) image via ajax into a display area above thumbs—> Click on medium-sized image—> Load full size image via lightbox, or something of that nature.)
I have everything working to this point, except, as one might imagine, resizing the full-sized images with css doesn’t maintain aspect ratio for the thumbs, which means I need to find the best way to resize these.
In thinking about it, I figured I had two options:
I could resize the image on the fly when the user clicks a thumbnail to load the medium-sized image via ajax. (I have a method ‘get_image($url)’ in my gallery controller which simply loads a view with an image tag and the image source passed to it, etc.) I thought perhaps I could send it first to my gallery model, resize it there on the fly, and send it on to the view. The problem I’m having is that resizing it on the fly and echoing it out gives me the raw image data (I apologize, I don’t know that’s the right term). I’ve tried using data_uris to format the raw data into something echoable, but with no success. Is this method possible?
The second option I considered was to generate a second medium-sized thumbnail when the user uploads the image with maintain_ratio set to true. This method is slightly less ideal, given that when providing a way for the user to delete their projects, I’ll need to scan for an additional set of images to delete. Not a huge deal, definitely, but something I figured could be avoided by generating the medium-sized image on the fly.
I hope I’ve been clear in my explanations, if long-winded! I’m very curious to see what suggestions folks have about the best way to handle this.
Much thanks for reading, and any suggestions are much-appreciated!
Steve K.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您不想做一些计算上困难的事情,例如为每个图像多次调整图像大小。那太贵了。
当您的访问者上传图像时,只需将其大小调整两次即可。做一个拇指,然后做中拇指。我可能还会将所有上传的图像记录在数据库表中,并以 project_id 和 user_id 作为外键。它们将避免您必须“扫描”才能删除图像。你知道他们在哪里。
You don't want to do something as computationally difficult as resizing an image more than once for each image. That's too expensive.
When your visitor uploads an image, just resize it twice. Make a thumb, and make medium thumb. I'd probably also keep a record of all uploaded images in a database table somewhere with project_id and user_id as foreign keys. They will avoid you having to 'scan' to delete images. You know where they are.