Displaying folder of images resized before for display (C#)

[wbodger]

I have code to show all images in a folder

        protected void Page_Load(object sender, EventArgs e)
        {
            string filters = "*.jpg;*.png;*.gif";
            string Path = "~/axisimages/";

            List<String> images = new List<string>();

            foreach (string filter in filters.Split(';'))
            {
                FileInfo[] fit = new DirectoryInfo(this.Server.MapPath(Path)).GetFiles(filter);
                foreach (FileInfo fi in fit)
                {
                    images.Add(String.Format(Path + "/{0}", fi));
                }
            }

            RepeaterImages.DataSource = images;
            RepeaterImages.DataBind();
        }

and then in the aspx

<asp:Repeater ID="RepeaterImages" runat="server">
    <ItemTemplate>
        <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' />
    </ItemTemplate>
</asp:Repeater>

Now, I found some code that I believe will resize like I want, but I am unsure where/how/when to implement

        public void ResizeImage(double scaleFactor, Stream fromStream, Stream toStream)
        {
            var image = System.Drawing.Image.FromStream(fromStream);
            var newWidth = (int)(image.Width * scaleFactor);
            var newHeight = (int)(image.Height * scaleFactor);
            var thumbnailBitmap = new Bitmap(newWidth, newHeight);

            var thumbnailGraph = Graphics.FromImage(thumbnailBitmap);
            thumbnailGraph.CompositingQuality = CompositingQuality.HighQuality;
            thumbnailGraph.SmoothingMode = SmoothingMode.HighQuality;
            thumbnailGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;

            var imageRectangle = new Rectangle(0, 0, newWidth, newHeight);
            thumbnailGraph.DrawImage(image, imageRectangle);

            thumbnailBitmap.Save(toStream, image.RawFormat);

            thumbnailGraph.Dispose();
            thumbnailBitmap.Dispose();
            image.Dispose();
        }

I want this all to happen on page_load (it is a folder of security camera motion activated images loaded at 1080p that I would like to resize to 20% for review then we can look at full size if we need to). Would I call ResizeImage inside Page_Load actually inside the inner foreach loop? What would that look like?

Thank you for any help you can give me.

Willie

 

[jbenson001]

The way we do it is to call a handler(.ashx) and pass the image. The handler has the resize code and passes back the stream to the "src" in the image tag.
This will work BUT, remember, you are getting the full size first then resizing which can take time and resources.
You may want to write a job that monitors the folder with the images in it. And each time an image is added it will be resized and copied to another folder. This way, you can display your "thumbnail" images, then have your front end open the full size image if clicked.