客户端的图像压缩代码和Loader [英] IMAGE Compression Code for Client Side along with Loader
本文介绍了客户端的图像压缩代码和Loader的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在我的网站上启用图像压缩，如果有任何用户上传图像，图像应该被压缩。我试过了下面的代码，但问题是它正在压缩所有图像，当文件大小约为2mb或更多时，它会很好但当文件大小为10kb时，50kb它甚至会尝试压缩此图像并且最终输出已损坏/模糊图像。
请帮助这个
Hi,
I am trying to enable Image compression on my website, where if any user uploads an Image, the image should get compressed.I have tried out below code but the issue is that it is compressing all Images,what happens is when a file size is around 2mb or more it works great but when file size is 10kb,50kb it even tries to compress this image as well and final output is corrupt/blurred image.
Please help on this
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Generate a Thumbnails from Uploaded Image</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btnsave" runat="server" Text="Upload" onclick="btnsave_Click" />
</div>
<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="3" CellPadding="5">
<itemtemplate>
<asp:Image ID="Image1" ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server" />
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server"/>
</itemtemplate>
<itemstyle bordercolor="Brown" borderstyle="dotted" borderwidth="3px" horizontalalign="Center">
VerticalAlign="Bottom" />
</itemstyle></div>
</form>
</body>
</html>
之后在代码中添加以下命名空间
After that add following namespaces in code behind
using System.Collections;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.IO;
完成添加后命名空间写下面的代码
After completion of adding namespaces write the following code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDataList();
}
}
protected void BindDataList()
{
DirectoryInfo dir = new DirectoryInfo(MapPath("Images"));
FileInfo[] files = dir.GetFiles();
ArrayList listItems = new ArrayList();
foreach (FileInfo info in files)
{
listItems.Add(info);
}
dtlist.DataSource = listItems;
dtlist.DataBind();
}
protected void btnsave_Click(object sender, EventArgs e)
{
string filename = Path.GetFileName(fileupload1.PostedFile.FileName);
string targetPath = Server.MapPath("Images/" + filename);
Stream strm = fileupload1.PostedFile.InputStream;
var targetFile = targetPath;
//Based on scalefactor image size will vary
GenerateThumbnails(0.5, strm, targetFile);
BindDataList();
}
private void GenerateThumbnails(double scaleFactor, Stream sourcePath, string targetPath)
{
using (var image = Image.FromStream(sourcePath))
{
var newWidth = (int)(image.Width * scaleFactor);
var newHeight = (int)(image.Height * scaleFactor);
var thumbnailImg = new Bitmap(newWidth, newHeight);
var thumbGraph = Graphics.FromImage(thumbnailImg);
thumbGraph.CompositingQuality = CompositingQuality.HighQuality;
thumbGraph.SmoothingMode = SmoothingMode.HighQuality;
thumbGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;
var imageRectangle = new Rectangle(0, 0, newWidth, newHeight);
thumbGraph.DrawImage(image, imageRectangle);
thumbnailImg.Save(targetPath, image.RawFormat);
}
}
推荐答案
请参阅我对该问题的评论。如果你想接受未压缩的图像（不是它需要更多的流量和上传时间）并压缩它们，那就去做吧。我建议使用JPEG和/或PNG压缩。在最简单的形式，
http：/ /msdn.microsoft.com/en-us/library/9t4syfhh%28v=vs.110%29.aspx [ ^ ]，
http://msdn.microsoft.com/en-us/library/system.drawing.imaging .imageformat％28v = vs.110％29.aspx [ ^ ]。
如果要压缩控制所有压缩参数（也可能还有改进图像），您可以在服务器端托管一些可用的转换实用程序，例如ImageMagic。例如，您可以通过一个或另一个可用的包装器使用ImageMagic for .NET：
https://magick.codeplex.com [ ^ ]，
https://imagemagick.codeplex.com [ ^ ]。
-SA
Please see my comment to the question. If you want to accept uncompressed images (not that it can require a lot more traffic and upload time) and compress them, just do it. I would advise using JPEG and/or PNG compression. In the simplest form,
http://msdn.microsoft.com/en-us/library/9t4syfhh%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/system.drawing.imaging.imageformat%28v=vs.110%29.aspx[^].
If you want to compress controlling all the compression parameters (and possibly also improve the images), you can host some available conversion utility on your server side, such as ImageMagic. For example, you can use ImageMagic for .NET through one or another available wrapper:
https://magick.codeplex.com[^],
https://imagemagick.codeplex.com[^].
—SA
让我们澄清一些事情：创建缩略图与压缩无关。缩略图通常只是低分辨率，低尺寸预览。实际上你压缩图像，但我认为你已经得到了压缩图像。它本身的图像大小并没有告诉我们有关压缩的任何信息。一个10MPx的JPG被压缩，仍然可以是3-5MB的大小。由此产生的压缩比取决于许多因素，但首先取决于图像的内容。在这里，您可以看到常见图像压缩格式的良好比较： https：//homepages.cae .wisc.edu / ~ece533 / project / f06 / aguilera_rpt.pdf [ ^ ]
重新采样一个好的缩略图，不仅在较小的画布上绘制。调整大小后，您应该以更高的质量对其进行编码。您在图形上应用的质量设置不会影响jpg压缩质量。
试试这段代码： http://www.dotnetfunda.com/codes/show/984/creating-high-quality-thumbnail-image-in-csharp [ ^ ]
如果您需要更多，也可以使用外部库，例如 AForge [ ^ ]
Let's clarify some things: creating a thumbnail has little to do with compression. A thumbnail is usually just a low resolution, low size preview. Actually you do compress images, but I assume you already get compressed images. The size of an image on it's own does not tell us anything about compression. A 10MPx JPG is compressed and still can be 3-5MB of size. The resultant compression ratio depends on many things but first of all on the content of the image. Here you can see a good comparison of the common image compression formats: https://homepages.cae.wisc.edu/~ece533/project/f06/aguilera_rpt.pdf[^]
A good thumbnail is resampled, not only drawn on a smaller canvas. And after resizing you should encode it in higher quality. The quality settings you apply on the graphics won't affect the jpg compression quality.
Try this code: http://www.dotnetfunda.com/codes/show/984/creating-high-quality-thumbnail-image-in-csharp[^]
If you need more, you can use external libraries also, like Resize* filters in AForge[^]
只是为了澄清..我不是在寻找缩略图...我对aspx看起来很像.net .... https://github.com/blueimp/jQuery-File-Upload .....
Just to clarify..I am not looking for thumbnail images..I am looking exactly like this for aspx.net.... https://github.com/blueimp/jQuery-File-Upload .....
这篇关于客户端的图像压缩代码和Loader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
