I developed an application where users can take photos that are then uploaded to a server. Each image is assigned a unique number and displayed in a gallery. Users have the option to download individual images or all images in a .zip file.
Due to the potential for users to upload numerous images, I encountered performance issues with the gallery when it reached a certain size (e.g., 20 images). The webpage became slow and poorly optimized.
To address this issue, I implemented a method to resize the photos. However, this presents a challenge as users may want to download the original, full-size image rather than the resized version.
I attempted to modify my method to accommodate downloading larger images by sending a higher size parameter, but encountered difficulties making it work.
The resizing method code snippet:
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
});
}
An example of how the method is used:
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());
}
}
Attempt at re-resizing images to increase size:
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 use the tags C#, asp.net, html , and css as there might be different approaches for front-end and back-end aspects.