Change DPI and/or Graphic File Dimensions Using ASP.NET and VB.NET

Greetings:

I have a client who currently is able to upload graphic file(s) to his website for display. My client is a restaurant owner and, as I believe most clients would agree, does not want to be bogged down with graphic file size do to DPI or dimensions of the the graphic.

I use VB.NET and Visual Studio Pro 2017.

I would like to manipulate the DPI and graphic dimensions for him. What I need to adjust are:
  • DPI
  • width or length keeping the aspect ratio of the graphic

I am not savvy when it comes to graphic files. I do know how to gain addressability to the graphic file IO stream after upload.

I need mentoring on how to do these two things and save the graphic file as a smaller version of itself.

Any assistance is greatly appreciated.


Much thanks,
David Bach
David BachSoftware DevelopmentAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technical NinjaCommented:
Hi David,

For the DPI part, it is simple, you can use Bitmap.SetResolution method. https://docs.microsoft.com/en-us/dotnet/api/system.drawing.bitmap.setresolution?view=netframework-4.7.2

I am more than happy if you need clarification on DPI part.

For your second query, I was thinking to write my own explanation but then a quick search gave me this code snippet from : https://www.encodedna.com/2014/07/how-to-resize-an-image-using-aspdotnet-without-losing-quality.htm

Markup
<!DOCTYPE html>
<html>
<head>
    <title>Resize Image using Asp.Net</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:FileUpload 
                ID="UploadFile" 
                multiple="false" 
                runat="server" 
                BorderStyle="None" />

            <input type="button" 
                value="Upload Image" 
                id="button" 
                onserverclick="Resize" 
                runat="server" />
        
            <div id="Info" runat="server" style="padding:20px 0;"></div>
        </div>
    </form>
</body>
</html>

Open in new window


Codebehind
Option Explicit On
Imports System.IO
Imports System.Drawing

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Resize(ByVal sender As Object, ByVal e As EventArgs)

        ' GET THE UPLOADED FILE.
        Dim hfc As HttpFileCollection = Request.Files
        If hfc.Count > 0 Then

            Dim hpf As HttpPostedFile = hfc(0)
            If hpf.ContentLength > 0 Then

                Dim sImageName As String = hpf.FileName

                ' FIRST SAVE THE FILE ON THE SERVER.
                hpf.SaveAs(Server.MapPath("~/" & Path.GetFileName(sImageName)))

                ' ORIGINAL WIDTH AND HEIGHT.
                Dim bitmap As New Bitmap(Server.MapPath("~/" & Path.GetFileName(hpf.FileName)))

                Dim iwidth As Integer = bitmap.Width
                Dim iheight As Integer = bitmap.Height
                bitmap.Dispose()

                ' SHOW DETAILS OF ORIGINAL IMAGE WITH SIZE.
                Info.InnerHtml = "<b>Original Image</b> "
                Info.InnerHtml = Info.InnerHtml & "<br /> Width: " & iwidth & ", Height: " & iheight & "<br /> " & _
                    Double.Parse(hpf.ContentLength / 1024).ToString("N0") & " KB <br>"

                ' ONCE WE GOT ALL THE INFORMATION, WE'll NOW PROCESS IT.

                ' CREATE AN IMAGE OBJECT USING ORIGINAL WIDTH AND HEIGHT.
                ' ALSO DEFINE A PIXEL FORMAT (FOR RICH RGB COLOR).

                Dim objOptImage As System.Drawing.Image = _
                    New System.Drawing.Bitmap(iwidth, iheight, _
                        System.Drawing.Imaging.PixelFormat.Format16bppRgb555)

                ' GET THE ORIGINAL IMAGE.
                Using objImg As System.Drawing.Image = _
                    System.Drawing.Image.FromFile(HttpContext.Current.Server.MapPath("~/" & sImageName))

                    ' RE-DRAW THE IMAGE USING THE NEWLY OBTAINED PIXEL FORMAT.
                    Using oGraphic As System.Drawing.Graphics = 
                            System.Drawing.Graphics.FromImage(objOptImage)
                        With oGraphic
                            Dim oRectangle As New System.Drawing.Rectangle(0, 0, iwidth, iheight)

                            .DrawImage(objImg, oRectangle)
                        End With
                    End Using

                    ' SAVE THE OPTIMIZED IMAGE.
                    objOptImage.Save(HttpContext.Current.Server.MapPath("~/images/" & sImageName), _
                        System.Drawing.Imaging.ImageFormat.Png)

                    objImg.Dispose()
                End Using

                objOptImage.Dispose()

                ' FINALLY SHOW THE OPTIMIZED IMAGE DETAILS WITH SIZE.
                Dim bitmap_Opt As New Bitmap(Server.MapPath("~/images/" & Path.GetFileName(sImageName)))

                Dim iwidth_Opt As Integer = bitmap_Opt.Width
                Dim iheight_Opt As Integer = bitmap_Opt.Height
                bitmap_Opt.Dispose()

                ' FOR SIZE.
                Dim OptImgInfo As New FileInfo(Server.MapPath("~/images/" & Path.GetFileName(sImageName)))
                Dim ifileSize As Integer = OptImgInfo.Length    ' GET THE SIZE IN BYTES.

                Info.InnerHtml = Info.InnerHtml & "<br / ><b>Optimized Image</b>"
                Info.InnerHtml = Info.InnerHtml & "<br /> Width: " & iwidth_Opt & ", Height: " & iheight_Opt
                Info.InnerHtml = Info.InnerHtml & "<br /><span style=color:green>" & _
                    Double.Parse(ifileSize / 1024).ToString("N0") & " KB</span>"
            End If
        End If
    End Sub
End Class

Open in new window


You can see that most important statement is the one where he chooses another pixel format to redraw the image.
The one with PixelFormat.Format16bppRgb555). You can also use other techniques using Smoothing and Interpolation Modes to achieve similar or for smaller images, better results.

Regards,
Chinmay.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David BachSoftware DevelopmentAuthor Commented:
Greetings Chimnay:

I was able to use both your suggestions to obtain the results for my client!

I did make changes to the code behind as follows:
  • Changed the objOptImage object from Image to Bitmap so I could change the resolution
  • Added code to ensure the longest side was 600px and the smaller side was adjusted appropriately
  • Removed the Format16bppRgb555 when creating a new Bitmap

My code behind with changes follows.
Imports System.IO
Imports System.Drawing

Partial Class Graphic
	Inherits System.Web.UI.Page

	Protected Sub Resize(ByVal sender As Object, ByVal e As EventArgs)

		' GET THE UPLOADED FILE.
		Dim hfc As HttpFileCollection = Request.Files

		If hfc.Count > 0 Then

			Dim hpf As HttpPostedFile = hfc(0)

			If hpf.ContentLength > 0 Then

				Dim sImageName As String = hpf.FileName

				' FIRST SAVE THE FILE ON THE SERVER.
				hpf.SaveAs(Server.MapPath("~/" & Path.GetFileName(sImageName)))

				' ORIGINAL WIDTH AND HEIGHT.
				Dim bitmap As New Bitmap(Server.MapPath("~/" & Path.GetFileName(hpf.FileName)))

				Dim iwidth As Integer = bitmap.Width
				Dim iheight As Integer = bitmap.Height

				bitmap.Dispose()

				' SHOW DETAILS OF ORIGINAL IMAGE WITH SIZE.
				Info.InnerHtml = "<b>Original Image</b> "
				Info.InnerHtml = Info.InnerHtml & "<br /> Width: " & iwidth & ", Height: " & iheight & "<br /> " &
					Double.Parse(hpf.ContentLength / 1024).ToString("N0") & " KB <br>"

				' ONCE WE GOT ALL THE INFORMATION, WE'll NOW PROCESS IT.

				' CREATE AN IMAGE OBJECT USING ORIGINAL WIDTH AND HEIGHT.
				' ALSO DEFINE A PIXEL FORMAT (FOR RICH RGB COLOR).

				Dim intSavedHeight As Int32 = iheight
				Dim intSavedWidth As Int32 = iwidth

				If iwidth > iheight Then
					iwidth = 600
					iheight = Convert.ToSingle((iwidth / intSavedWidth) * iheight)
				Else
					iheight = 600
					iwidth = Convert.ToSingle((iheight / intSavedHeight) * iwidth)
				End If

				Dim objOptImage As Bitmap =
					New Bitmap(iwidth, iheight)
				objOptImage.SetResolution(72, 72)

				' GET THE ORIGINAL IMAGE.
				Using objImg As Image =
					Image.FromFile(Server.MapPath("~/" & sImageName))

					' RE-DRAW THE IMAGE USING THE NEWLY OBTAINED PIXEL FORMAT.
					Using oGraphic As Graphics =
							Graphics.FromImage(objOptImage)

						With oGraphic

							Dim oRectangle As New Rectangle(0, 0, iwidth, iheight)

							.DrawImage(objImg, oRectangle)
						End With

					End Using

					' SAVE THE OPTIMIZED IMAGE.
					objOptImage.Save(HttpContext.Current.Server.MapPath("~/Images/" & sImageName),
						Imaging.ImageFormat.Jpeg)

					objImg.Dispose()
				End Using

				objOptImage.Dispose()

				' FINALLY SHOW THE OPTIMIZED IMAGE DETAILS WITH SIZE.
				Dim bitmap_Opt As New Bitmap(Server.MapPath("~/images/" & Path.GetFileName(sImageName)))

				Dim iwidth_Opt As Integer = bitmap_Opt.Width
				Dim iheight_Opt As Integer = bitmap_Opt.Height

				bitmap_Opt.Dispose()

				' FOR SIZE.
				Dim OptImgInfo As New FileInfo(Server.MapPath("~/images/" & Path.GetFileName(sImageName)))
				Dim ifileSize As Integer = OptImgInfo.Length    ' GET THE SIZE IN BYTES.

				Info.InnerHtml = Info.InnerHtml & "<br / ><b>Optimized Image</b>"
				Info.InnerHtml = Info.InnerHtml & "<br /> Width: " & iwidth_Opt & ", Height: " & iheight_Opt
				Info.InnerHtml = Info.InnerHtml & "<br /><span style=color:green>" &
					Double.Parse(ifileSize / 1024).ToString("N0") & " KB</span>"
			End If

		End If

	End Sub

End Class

Open in new window

Much thanks for your help, Chinmay!

David Bach
Chinmay PatelChief Technical NinjaCommented:
Glad I could help David.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.