So I have this website where users can post articles, each article containing at least one photo. What I want to do is when I display the list of articles on the website I want to also show a thumbnail next to the articles name.
Here comes the tricky part: the images are not hosted on my server, are simply links hosted on some image-hosting website. Another problem is that I don't know where the images appear in the post (they could be at the beginning, at the end or in the middle of the article).
What would be the best approach to create a thumbnail system in this case?
I was thinking maybe I could do this: every time an article is posted or edited and stored into the database I could scan the entire articles for images links and store the first link in a separate value in the database (this could be kind of slow though).
Also once I have those values stored and I have to display a thumbnail the only way to do so will be by showing the full image resized to the thumbnail size (that means the user has to download multiple full-size images to see the articles list with thumbnails).
Is there any better approach? (you can see the technologies used in the tags)
Create a thumbnails task that runs in the background after an article has been published.
Find image tags in the article HTML using regular expression.
Get those images and create and thumbnail that you save locally in a folder in your server.
Protect that folder/location against hotlinking.
Use those local pictures as thumbnails
Use HtmlAgilityPack as a starter to get to the images from the image host.
Use an ASP.NET handler to generate the thumbnails. That way, you won't have to store anything locally, the thumbnails images will only exist in memory, making hotlinking impossible
Related
I'm currently in need of develop a website that allow user to input information and images into a <textarea> then save to database. Those data will be displayed in another page.
I though of using AJAX to upload file then append the <img> to <textarea>. But this approach will produce SQL injection security threat.
So I need an advice on how to achieve this but still can get rid of SQL injection.
When the user uploads an image, just do the following and you will be safe to append the image HTML to the textarea:
Is the user upload a valid JPG/GIF/PNG/x image? (Use image libraries to verify that.)
Rename the image to something "safe" like a CRC32 of its contents + the current time in microseconds so the file name is innocuous.
Put the image with its new name in a location that can be served.
you'll find you cant upload files using ajax - you will want to find a plugin for that. I'd reccomend looking at https://github.com/blueimp/jQuery-File-Upload/wiki - although it may have too many features. Theres even an mvc3 example for it! https://github.com/maxpavlov/jQuery-File-Upload.MVC3
After you upload the image, I suppose you can trigger another ajax event to retrieve the image and then display it in a div next to the text area.
As far as security issues, I've been told allowing a user to upload a file is inherently insecure. see https://github.com/blueimp/jQuery-File-Upload/wiki/Security for more details.
My apologies for the excess links. Also, if you're storing many, many files with infrequent access, you may want to consider saving the files to disk. ie. write them to a network location and store the filename in a table (save the file on disk with a GUID).
ie. Table UserFileLocations
PK | UserFileName | DiskID
1..n | tree.jpg | //ServerPath/Folder/103c-aa34-0ac2-01cd
...
I have a web app that displays the profile of over 600 people, and each profile displays a word cloud. the word cloud is rendered using html.
The client has requested that the same word cloud to appear in an excel macro that pretty much does the same thing as the web app.
I have seen a few solutions that saves image from rendered page but is there a way to create images from the html programatically, without selecting each of the 600 profiles manually.
Since rendering html is a browser's job, you could take a look at doing it by javascript.
Write a nice little program in jQuery (or your favorite js framework) that renders the word cloud of every profile on a canvas, and then use this:
http://www.nihilogic.dk/labs/canvas2image/
to take an image of the rendered html.
I know it has been a while since I asked this question but I'll answer it for the benefit of others. I ended up using something called IECapt to capture rendering of a web page into a BMP, JPEG or PNG image file;
http://iecapt.sourceforge.net/
I then wrote a unit test to iterate over the various urls, passing it as an argument to the IECapt utility. Was able to render over 600 images in a few seconds.
How to manage user picture in c# for my web application
i want all images as
1.png 2.png 3.png if user upload GIF and jpeg that it is convert to .png
how i can do this.
Phil Haack just wrote about Uploading a file (or files) with ASP.NET MVC.
This will give you a good starting place with your image upload requirements.
Once you've obtained the image from the user you can name it anything you like before saving. You could store all images together and link the user to the image via a database entry or you could create a user image folder and store the image in there.
There's a huge variety of ways you can accomplish your goal so these are just a couple of sugestions to help you along the way.
I have a database which stores .png images as the sql "image" type. I have some code which retrieves these images as a byte[], and sends them to the page via the FileContentResult object in .Net. Performance is key in this application, and the images have to be retrieved and displayed as quickly as possible. My question is, can this operation be performed quicker by passing a byte stream from the database to the browser, and not at anytime storing the whole byte array in memory. If this is possible and worthwhile doing, how do I do it?
Here is the code I have so far:
// Get: /Image/Get/5
public FileResult Get(int id)
{
Response.Cache.SetExpires(DateTime.Now.AddSeconds(300));
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetValidUntilExpires(true);
// Get full size image by PageId.
return base.File(page.getFullsizeImage(id), "image/png");
}
And
public byte[] getFullsizeImage(int pageId)
{
return (from t in tPage
// Filter on pageId.
where t.PageId == pageId
select t.Image).Single().ToArray();
}
Thanks for any help!
A nice question.
Reality is the code required to send the image as a stream is really minimal. It is just Response.Write~~~ byte array and setting the HTTP's content-type header which must be very fast.
Now you seem to need to open up your database to the world to get it done quicker. That, being probably possible using features that allow SQL server to serve HTTP/interact with IIS (long time ago I looked at it), not a good idea so I do not believe you should take that risk.
You are already using the caching so that is cool but files being large, cache gets purged frequently.
But one thing to do is to have a local File Cache on the IIS and if image is used, it is written to the file on teh web server and from then on (until maybe next day when this is cleared) this other URL (to the static asset) is returned so requests would not have to go through the ASP.NET layer. It is not a great idea but will achieve what you need with least risk.
Changing the linq from single to first should give you nicer SQL, if PageId is the primary key you can safely assume first and single will return the same result.
Edit: Based on your comments, I think you should consider using DeepZoom from microsoft. Essentially, what this allows you to do is generate a specialized image file on the server. When a user is browsing the image in full view, just the couple of million or so pixels that are displayed on the screen are sent to the browser via AJAX. Then when the user zooms in, the appropriate pixels for the zoom level and x and y axis are streamed out.
There is a DeepZoom Composer which can be accessed via the command line to generate these image files on demand and write them to a network share. Your users will be really impressed.
Take a look at this example. This is a massive image - Gigabytes. in about the middle of the image you will see some newspaper pages. You can zoom right in and read the articles.
End of Edit
Do you have to have images with a large file size? If they are only meant for displaying in the browser, they should be optimized for the web. All main image editing applications have this ability.
If you do need the large file size, then you could provide optimized images and then when the user clicks on the image, allow them to download the full file. They should expect this download to take some time.
In Photoshop, the task is "Save for web". There is a similarly named plugin for Gimp.
I know that this doesn't answer your direct question ("can this operation be performed quicker by passing a byte stream"), but it might help solve your problem.
Got a question. I have images hosted on my server. I already know of the method when an image is uploaded to resize it and save, but I have another thought in mind.
I was wondering if there is a way to resize when the image is requested from the user. Not when it was uploaded by the user.
So for example a user goes to upload an image and I DO NOT RESIZE it and save another copy of the resized image. Instead, when the image is requested by the user via an ASP.NET img control/tag it would resize the image on the fly to display it and display it via the img tag/control.
Why would I want to do this?
To save on disk space. Most servers have a disk space limit, but not a server processing limit. So I would like to save on disk space and use the processing space instead.
EDIT: As a startup website its currently better that I save disk than saving processing time. I don't have much money for large amount of space at this moment. Hopefully it will change when the site launches.
Any ideas? Thanks guys and girls.
I assume you can 'control' the urls to the resized images, so for example the full-sized image might be referenced as <img src="uploads/myphoto.jpg"/> the thumbnail could be to an ASPX or ASHX like <img src="uploads/myphoto.jpg.ashx"/>?
This article on CodeProject - Dynamic Image Resize seems to have exactly the source code you are looking for (and although it's in VB, it shouldn't be hard to port if you're a C# person). Hope that helps.
Finally, I'd encourage you consider the various forms of caching (both using Http-Headers, to ensure the images are cached at the client or proxy whenever possible; and using built-in ASP.NET features to avoid unnecessary processing of the same images over-and-over).
Although you'll be saving disk-quota, you're effectively slowing down every other page/request... just a thought.
Dynamic image resizing has numerous advantages, the least of which is reduced disk space usage. However, it does need to be combined with a form of persistent caching, such as either Amazon CloudFront or a disk cache.
Dynamic image resizing gives you great agility on your web site, whereas pre-generating image variants locks you in, preventing the eventual changes you will have to make. When combined with caching, there is no run-time performance difference between the two.
The ImageResizer library offers disk caching, CloudFront caching, and correct memory and cache management. It's been constantly improved and maintained since 2007, and is quite bulletproof. It's running a few social networking sites as well, some having over a million images.
It's a time-tested, traffic-tested, and unit-tested library :) It's also extremely simple to use - you just add ?width=x&height=y to the query string. Functionality can be added via 20+ plugins, so you won't be weighed down by unused code and features.
The article mentioned by CraigD is inherently limited in its performance by the fact that it uses an HttpHandler instead of using an HttpModule - an HttpHandler cannot pass a request back to IIS native code for execution after the resized image is written to disk. It also doesn't adjust jpeg encoding properly or play well with the ASP.NET cache or URL authorization system. Although, I do have to admit - compared to most of the sample code I've seen, it violates far fewer of the image resizing pitfalls I've compiled.
I strongly suggest using the ImageResizer library. It's good code, I wrote it :) If you do end up using sample code or writing your own, please avoid these pitfalls!
You can create an implementation of IHttpHandler to respond to image requests, in that handler you can have code that loads the image from disk and transforms to it a size that is needed. You need to return the proper mime type with the response, and use the WriteBytes method (or something like it, I forgot the name). Also, you may look into content expiration headers, so that the image may not have to be loaded every time by the same client, but is instead cached.
You claim unlimited processing but limited disk space. Most of the time, even if they don't enforce a processing limit, as you have more customers, hits to your site, processing will be a worse bottleneck than storage space, and it will cost more to add more processing. Furthermore,
If you have large images, resized and compressed versions will occupy %10 of the space of the originals, even if you store a display and thumbnail version.
Else, just serve them and display them resized by browser, it will be faster.
It is not really actual resize of image, it is rather resize when you display an image, but i used with success just simple
<img src="myimage" height="height you want to give" width="width you want
to give" alt="" />
It is working every time.