Load external images efficiency - c#

I would like to know a most efficient way to load external images to my website.
For example:
My website's url is "www.mydomain.com". The external image is http://www.myimagedomain.com/image.jpg.
The most common way is to write a simple html image-tag like
<img src="http://www.myimagedomain.com/image.jpg" />.
The problem is, if the requested image is very large (8000x6000 pixel) but I want to show this picture as a thumbnail/preview like 200x200 pixel, e.g on mobile devices.
Based on this information I wrote a little ashx (c#) handler that downloads the requested image and resizes it to a given weight/height parameters, like this:
<img src="http://www.mydomain.com/img.ashx?imageUrl=http://www.myimagedomain.com/image.jpg&w=200&h=200" />
Now there is another problem, because the httphandler always downloads the requested image, on-the-fly.
My new approach is to generate a based64 string from the resized image and save this in a database once?!
Would you recommend this or is there another way to eliminated the download problem?
Maybe someone know how google-image-search prevents this problem?
I don't want to save the external images on my own server...

I would suggest to use image resizer library, it solves much of what you need in efficient way - caching included:
http://www.nuget.org/packages/ImageResizer/
I think google caches image thumbnails on its servers for search.

Related

Display images stored in the database with a datatype image in asp.net web Form

I have images stored in a SQL Server database with datatype image. I want to retrieve them and convert them to bitmap, and use them to create an asp.net web form image gallery for an online shopping web site.
Should I use <asp:Repeater> control, <asp:GridView> or data list control?
I don't want to use image path stored in the database
It's sad that the experts here are asking you questions as if you already know how to solve your problem which it is clear from your question you don't. Let me try and give you a little background and direction and I think you will be able to get closer to solving what you want to do.
Your images are just blobs in your sqlserver database which has no direct connection the web. The only way you can show images is you need to basically put them into an img tag with src= the location on your web server. What needs to happen is the location on the web server you choose must instead of reading a file from the file system of the server, must somehow grab the image from the database and then stream those image bytes to the img tag on the page.
THere are multiple ways to do that in asp.net. The easiest is a handler or ashx file (don't even know if those are supported anymore).
At anyrate, here is a link that might help. You might try googling something like "display image from sql server on asp.net" and see what else comes out. Obviously, lot's of people do this and you will to soon.
Good Luck.
https://www.aspsnippets.com/Articles/Display-image-from-database-in-Image-control-without-using-Generic-Handler-in-ASPNet.aspx

How to Extract Larger Images from an HTML Page to Make Thumbnails (Like Facebook Does)

In my application, I post articles and the entire document is stored as html in the database. In different places in the articles I use images. (By uploading it or just placing img urls).
On the homepage I want to make thumbnails of my desired size, so that I can place some recent articles along with their preview images there.
So, how can I extract larger images from any html document? (So that only relevant images are selected, not any other images)
And from the list of images, how to determine and select image which occurred at first?
I want to use that "one" image to make thumbnail programatically on the server. I
will cache it and then display it on the page.
Like a wordpress application or any other CMS does.
Currently, I use the following approach which is I think is not correct:
At the time of posting an article when I upload images in the editor, I keep the imageId of the of the last uploaded image and store it into the database along with the article. So I have a separate column for imageId for each article I post.
Problem starts when I do not upload any image, then I have to insert a default imageId automatically to avoid problems. This process is annoying. Please help me out. Please guide me the most practiced and the easiest solution available.
The site where I implement all this is http://disneyduniya.in
You can use demo of below code: Generate Web Page Thumbnail Screenshot Image:
Demo link Its working : http://pietschsoft.com/post/2008/07/C-Generate-WebPage-Thumbmail-Screenshot-Image
It will create image file ,save this file As and customize height and width
.

Displaying image on page from binary data

I store my image file into the database as binary type ?
if i want to get the image from the database and show it into aspx page.
I have two option
1.To build a handler
2.to use data uri scheme (which i prefer)
what option should i prefer to show the image
Handler is the way to go. Data URI would only be good if the images were very small, because the user will need to wait for a big page to download with images embedded rather than get the page super-quick then download images concurrently on different connections/threads.
Personally I prefer the HTTPHandler approach. It means that should you decide later on that you would prefer to store your binary images in some other fashion then you simply have to update the handler accordingly.
There's a good example of the HTTPHandler approach on this link;
http://www.worldofasp.net/tut/images/Displaying_images_in_ASPNET_using_HttpHandlers_92.aspx

Image resizing on the fly in asp.net

For simplicity lets say that I have a web page that needs to display thumbnails of images. The images locations are stored in a database(the images are stored on Amazon S3). Is it possible to have my web server scale down the large image before it is delivered to the client? This way I don't have to store thumbnails of every image and the client can download a smaller file.
Every tutorial on this topic over-simplifies the situation and nearly all of them leak memory. It's a long read, but you should know about the 29 image resizing pitfalls so you can avoid them.
I wrote a library to do server-side dynamic image resizing safely. It's not something that can be done properly in 1 tutorial or even 10. You can solve 80% of the bugs, but not 100%. And when you're doing something this resource-intensive, you can't tolerate bugs or memory leaks.
The core library is free and open-source, but the Amazon S3 plugin is part of the Performance edition, which has a $249 license fee. The Performance Edition comes with source, examples, and documentation for S3, MS SQL, Azure, MongoDB GridFS, and CloudFront integration, as well as terabyte-scale disk caching and memcaching.
From the statistics I have access to, it appears that imageresizing.net is the most widely-used library of its kind. It runs at least 5 social networks and is used with image collections as large as 20TB. Most large sites use the S3 plugin, as local storage (or even a SAN) isn't very scalable.
Sure, no problem. There's plenty of resources on the web that show how to dish up an image from a database. So I won't duplicate that here.
Once you've loaded the image, you can easily shrink it using .NET. There is an example at the following URL. It doesn't do exactly what you are doing, but it does generate thumbnails of an image.
http://blackbeltcoder.com/Articles/graphics/creating-website-thumbnails-in-asp-net
Using WebImage class that comes in System.Web.Helpers.WebImage you can achieve this.
You can use this great kid to output resized images on the fly.
Sample code:
public void GetPhotoThumbnail(int realtyId, int width, int height)
{
// Loading photos’ info from database for specific Realty...
var photos = DocumentSession.Query<File>().Where(f => f.RealtyId == realtyId);
if (photos.Any())
{
var photo = photos.First();
new WebImage(photo.Path)
.Resize(width, height, false, true) // Resizing the image to 100x100 px on the fly...
.Crop(1, 1) // Cropping it to remove 1px border at top and left sides (bug in WebImage)
.Write();
}
// Loading a default photo for realties that don't have a Photo
new WebImage(HostingEnvironment.MapPath(#"~/Content/images/no-photo100x100.png")).Write();
}
More about it here: Resize image on the fly with ASP.NET MVC
Here's a great tutorial that shows how to work with WebImage directly from the ASP.NET site:
Working with Images in an ASP.NET Web Pages (Razor) Site
Yes.
You make a ASP.Net page that does Response.Clear(), sets Content-Type-header in Response and sends the binary data of the image (also through Response). The image can be resized on-the-fly, but I'd recommend caching it for some time on disk or so. Then you reference the image from HTML as <img src="http://server/yourimagepage.aspx">. For storing image in memory before sending you can use MemStream.
I have sample code but not in front of me right now, sorry. :)

Dynamically reducing image dimension as well as image size in C#

I have an image gallery that is created using a repeater control. The repeater gets bound inside my code behind file to a table that contains various image paths.
The images in my repeater are populated like this
<img src='<%# Eval("PicturePath")' %>' height='200px' width='150px'/>
(or something along those lines, I don't recall the exact syntax)
The problem is sometimes the images themselves are massive so the load times are a little ridiculous. And populating a 150x200px image definitely should not require a 3MB file.
Is there a way I can not only change the image dimensions, but shrink the file size down as well?
Thanks!
I would recommend creating a handler that can resize images for you on the fly and encode them in whatever format you like.. kind of like a thumbnail generator. This will cost CPU on the server but you can cache images and severely reduce bandwidth costs ETC. Let me see if I can find the link to a good article I read on something similar.
You can look at this article it isn't the one I had read but it has some info about how you can go about implementing this.
You're looking for the GetThumbnailImage method of the Image class. You will either want to generate the thumbnail images ahead of time or create the image the first time it is accessed and save it to disk for later use (so first access would be slow but subsequent requests would be quick).
You could try either of these 2 projects on CodePlex.com, both offer dynamic image generation with caching.
Dynamic Image Process
ASP.NET Image Generation
The later is straight from Microsoft.

Categories

Resources