从我的图片库html css预览图片

Question

我有一个应用程序，用户可以在其中拍照并上传到服务器上。然后可以找到带有数字的图像，并将其显示在库中。如果您愿意，您可以单独下载，也可以在一个.zip中全部下载。

用户可以上传很多图片，所以如果图库有20张图片，网页速度会很慢，优化效果也会很差。

所以，我所做的是使用一种方法并调整照片的大小。但这是一个问题，因为我想要的是下载原始图像，而不是调整大小的图像。

我该怎么做？我试着使用同样的方法，但发送的大小比它的大，但它不起作用。

重新调整大小的方法：

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
});
}

方法示例：

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());
}
}

重新调整图像大小(试图使其变大(：

foreach (var list in orderList)
{
if(count == 0)
{
ChangeImageSize(orderList, 1000);
count = 1;
}
// imgAndroid202296images....
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);
}

我将标记C#, asp.net, html和css，因为它们可能是前端和后端的不同方式。

Answer 1

解决方案1:

你可能想做的就是简单地存储上传照片的原始和压缩版本。

您可以为此使用两个目录，例如"；原始的"；以及"；压缩"；。使用图库中的压缩图像，并让下载链接指向相应的原始图像。

解决方案2:

你也可以在飞行中压缩照片。在这种情况下，您可以在服务器上存储未经压缩的原始照片。在你的图库中，你可以让你的图像指向一个特殊的"；页面"；或者加载原始照片并在压缩/调整大小后显示修改后的版本的HttpHandler。你可以在内存中完成这一切，并二进制写入照片流，或者先将其存储在磁盘上，然后呈现。

示例：

在这个例子中，我使用的是asp.net web表单，但您可以使用类似的模式

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

在复印机中.ashx

//Your code to load, compress and resize your image into "imgbytes"
Response.ContentType = "image/jpg";
Response.BinaryWrite(imgbytes);
Response.End();