Preview image from my image gallery html css

Question

I have an app where users take a photo and it is uploaded on a server. The images then can be found with a number, and the shown in a gallery. If you want, you can download it individually or all in one .zip .

The users can upload lots of images, so if the gallery has, for example, 20 images, it will be very slow the webpage and very poorly optimized.

So, what I did is to use a method and resize the photos. But this is a problem because what I want is to download the original image, and not the resized one.

How can I do it? I'm trying to use the same method, but sending a higher size than it has but it doesn't work.

Method to ReSize:

private void ChangeImageSize(List<OrderViewModel> orderViewModels, int newSize)
        {
            try
            {
                foreach (var item in orderViewModels)
                {
                    var imageResult = Image.Load("wwwroot/" + item.getImages());

                    this.SaveImage(imageResult, "wwwroot/" + item.getImages(), newSize);
                }
            }
            catch (Exception ex)
            {
                ViewData["ERROR"] = ex.Message;
                throw new Exception(ex.Message);
            }

        }

        private void SaveImage(Image image, string name, int resizeWidth)
        {
            var width = image.Width;
            var height = image.Height;

            if (width > resizeWidth)
            {
                height = (int)((double)resizeWidth / width * height);
                width = resizeWidth;
            }

            picture
                .Mutate(i => i.Resize(new Size(width, height)));

            image.Metadata.ExifProfile = null;

            image.SaveAsJpeg(name, new JpegEncoder
            {
                Quality = 100
            });
        }

Method example:

private List<OrderViewModel> ViewOrder(string identi)
         {
             List<OrderViewModel> OrderList;
             string query;

             try
             {
                 OrderList = new List<OrderViewModel>();
                 query = "SELECT DISTINCT p.Order, p.Delivery, p.Remit, e.Path, e.Date from Order p INNER JOIN Delivery e ON p.Delivery = e.Delivery WHERE p.Order = '" + identi + " ' GROUP BY p.Order";

                 OrderList = SelectMySqlConnection(query);

                 if (orderList.Count == 0 || orderList == null)
                 {
                     return OrderList;
                 }

                ChangeImageSize(orderList, 500);

                 return OrderList;
             }
             catch (Exception ex)
             {
                 ViewData["ERROR"] = ex.Message;
                 throw new Exception(ex.ToString());
             }
         }

Re-Resize images (trying to get them bigger):

foreach (var list in orderList)
                     {
                         if(count == 0)
                         {
                             ChangeImageSize(orderList, 1000);
                             count = 1;
                         }
                         // imgAndroid\2022\09\06\images....
                         imageName = list.getImagePath().Split("/");
                         var file_name = imageName[5];
                         var array_fileBytes = System.IO.File.ReadAllBytes(@"wwwroot/" + list.getImages());
                         zip.AddEntry(file_name, file_arrayBytes);
                     }

I will tag C#, asp.net, html and css because maybe are differents ways for front-end and back-end.

Answer 1

Solution 1:

What you probably want to do, is simply store the original and the compressed version of uploaded photo(s).

You could use two directories for this purpose, say "original" and "compressed". Use the compressed images in your gallery, and let the download link point to the corresponding original image(s).

Solution 2:

You could also compress photos on-the-fly. In this scenario, you store the original photos without compression on your server. In your gallery, you let your images point to a special "page" or HttpHandler that loads the original photo, and presents the modified version after compression / resizing. You can do this all in memory and binarywrite the photostream, or store it on disk first and then present it.

Example:

In this example I am using asp.net web forms, but you can use a similar pattern

<img src="photocompressor.ashx?photo=somepath" />

In photocompressor.ashx

//Your code to load, compress and resize your image into "imgbytes"

Response.ContentType = "image/jpg";
Response.BinaryWrite(imgbytes);
Response.End();