Display thumbnail of images in folder c#

Hi all,

I want to read all image contained in a folder and display in a repeater.

Now as the images could be quite large I was hoping to generate thumbnails rather than using the whole image.

any ideas on how I can achieve this?

I currently get the images as follows;

            string[] list = Directory.GetFiles(Server.MapPath("images"));
            var aList = from fileName in Directory.GetFiles(Server.MapPath("images")) select string.Format("/images/{0}", Path.GetFileName(fileName));
            ImageUploadRepeater.DataSource = aList;
            ImageUploadRepeater.DataBind(); 

Open in new window

flynnyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

käµfm³d 👽Commented:
0
Sameer Rakshesoftware developerCommented:
Bind to a node in Active Directory Domain Services with the DirectoryEntry class
Use the DirectorySearcher class to specify a search filter and find the desired user
Extract the image bytes from the user properties
Convert the bytes to a usable format.

Go through below code:

private void GetUserPicture(string userName)
{
    var directoryEntry = new DirectoryEntry("LDAP://YourDomain");
    var directorySearcher = new DirectorySearcher(directoryEntry);
    directorySearcher.Filter = string.Format("(&(SAMAccountName={0}))", userName);
    var user = directorySearcher.FindOne();

    var bytes = user.Properties["thumbnailPhoto"][0] as byte[];

    using (var ms = new MemoryStream(bytes))
    {
        var imageSource = new BitmapImage();
        imageSource.BeginInit();
        imageSource.StreamSource = ms;
        imageSource.EndInit();

        uxPhoto.Source = imageSource;
    }
}

Open in new window

0
flynnyAuthor Commented:
kaufmed,

many thanks for your reply.

Is it possible to just send a thumbnail client side and not alter or store an additional image?

for example if i upload a 900px by 400px image. When I display this image i would like to get the thumbnail snap shot and simply bind it to my repeater?

the example code you show saves a copy of the downgraded image?

is the only alternative to maybe save a _thumbnail copy of the image in the same folder? If this is the case how can i filter out the large images and just select the thumbnails.
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

käµfm³d 👽Commented:
Anything on the web has to have a URI in order to be retrieved by a browser. You don't necessarily have to have a physical file in order to server something to a browser, but you do have to have a URI. You could create a second "page" whose only job is to serve files. The downside is that you have one URI to (most likely) serve multiple images, so you'll end up losing caching. However, I believe you can work around this by adding in a querystring.

As an example, the new page that I refer to would be a generic handler (.ashx). It could look like this:

Markup
<%@ WebHandler Language="C#" CodeBehind="GetThumbnail.ashx.cs" Class="WebApplication2.GetThumbnail1" %>

Open in new window


Code Behind
using System;
using System.IO;
using System.Web;

namespace WebApplication2
{
    public class GetThumbnail1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string filename = context.Request.QueryString["filename"];

            if (!string.IsNullOrWhiteSpace(filename))
            {
                string mappedPath = context.Server.MapPath(Path.Combine("Images/", filename));

                if (File.Exists(mappedPath))
                {
                    System.Drawing.Image source = System.Drawing.Image.FromFile(mappedPath);
                    System.Drawing.Image thumbnail = source.GetThumbnailImage(100, 100, null, IntPtr.Zero);
                    MemoryStream imgData = new MemoryStream();

                    thumbnail.Save(imgData, System.Drawing.Imaging.ImageFormat.Png);

                    context.Response.Clear();
                    context.Response.Headers["Content-Type"] = "image/png";
                    context.Response.BinaryWrite(imgData.ToArray());
                    context.Response.Flush();
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Open in new window


Then, in your main page do something like:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:Image ImageUrl="~/GetThumbnail.ashx?filename=orderedList9.png" runat="server" />
</asp:Content>

Open in new window


The Image object points to the new handler that was created. The querystring allows you to change which image is served without having to implement a handler for each image on your server (yikes!).
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
flynnyAuthor Commented:
thats great.

how would this stand from a performance perspective? as whilst its ideal in that there are no scaled images stored on the machine, it is essentially creating these images on the fly?

woul dyou go with this or just store thumbnails and access these?
0
käµfm³d 👽Commented:
P.S.

You may need to fiddle with lines 24 and 27 if you are working with image format other than PNG. I just used PNG as an example (since that was what my Images folder already contained).
0
käµfm³d 👽Commented:
it is essentially creating these images on the fly?
Yes.

woul dyou go with this or just store thumbnails and access these?
I haven't worked on anything yet that has had this requirement, so I'd probably be the wrong person to ask for an opinion. The only thing I could say would be that you can benchmark both approaches and see what works better for you. If you have a low to moderate traffic site, then this may not be a big deal. If you're serving Google-level traffic, and you don't have distributed architecture, then this might not be so hot.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.