VB NET: Reading a PNG Image, Modifying it, then Sending it to the User

This is handy if you want to do some programmatic modifications to an image before presenting it to a user.

In this example, we have a web page that we will use to present a modified image to users of the site. We can do the manipulations with the standard .NET Drawing libraries.

Step 1: Reading the file into an in-memory Image

More specifically, we start out by reading in the image from the server’s file system. For this task we can simply use the System.IO library to read in the file into an in-memory Stream object. Once you’ve got this, you can populate an in-memory System.Drawing.Image object with the stream data.

Dim strFileName As String = String.Format("C:\inetpub\wwwroot\YourWebSiteName\Files\{0}", m_strMapName)
Dim strmStream As Stream = Nothing
Dim tmpOriginalImage As System.Drawing.Image
Dim byteImageOut As Byte()
Try
   strmStream = IO.File.Open(strFileName, IO.FileMode.Open)
   Dim intFileSize As Integer = strmStream.Length - 1
   Dim bytUpFile(intFileSize) As Byte
   strmStream.Read(bytUpFile, 0, intFileSize)
   tmpOriginalImage = System.Drawing.Image.FromStream(New System.IO.MemoryStream(bytUpFile))
Catch ex As Exception
   Response.Write(ex.ToString)
Finally
   strmStream.Close()
   strmStream.Dispose()
End Try

Step 2: Changing the image to a modify-able Bitmap

Once we have an image copy of the file, we’ll want to be able to modify and work with it. This is best done by converting the Image to a Bitmap. This involves several steps including setting the dimensions and interpolation mode.

Dim tmpGraphics As Graphics
Dim tmpResizedImage As Bitmap = New Bitmap(CInt(tmpOriginalImage.Width), CInt(tmpOriginalImage.Height))
tmpGraphics = Graphics.FromImage(tmpResizedImage)
tmpGraphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear
tmpGraphics.DrawImage(tmpOriginalImage, 0, 0, tmpResizedImage.Width + 1, tmpResizedImage.Height + 1)

Step 3: Changing the image programmatically

Great, now that we’ve got the image in a modifiable Bitmap, we can make some edits. In this example, we’ll simply draw a circle on top of the original image.

Dim pn As New Pen(ColorTranslator.FromHtml("#0F8FFF"), 10)
Dim center As New Point(m_intMapX, m_intMapY)
Dim radius As Int32 = 40
Dim rect As New Rectangle(center.X - 40, center.Y - 40, radius * 2, radius * 2)
tmpGraphics.DrawEllipse(pn, rect)

Step 4: Presenting the finished image to the user

Now that we have the image with our new changes, the task is to show the image to the end user. The simplest way is to stream the image to the user’s browser in the response stream. As before, we also want to not have to write anything to the file-system, so everything has to be handled in-memory. Here’s how:

Dim imageOut As System.Drawing.Image = tmpResizedImage
Dim tmpMemStream As New System.IO.MemoryStream()
imageOut.Save(tmpMemStream, System.Drawing.Imaging.ImageFormat.Png)
byteImageOut = tmpMemStream.ToArray()
If byteImageOut IsNot Nothing Then
   Response.Buffer = True
   Response.Cache.SetCacheability(HttpCacheability.NoCache)
   Response.ContentType = "image/PNG"
   Response.AddHeader("content-disposition", "attachment;filename=MyCoolPicture.png")
   Response.BinaryWrite(byteImageOut)
   Response.Flush()
   Response.End()
End If

Putting it all together

Now that we have all of the steps needed to read-in the file, modify it, and then present it back to the user’s browser, it’s time to put it all together. Here is the code all in one place:

Dim strFileName As String = String.Format("C:\inetpub\wwwroot\YourWebSiteName\Files\{0}", m_strMapName)
Dim strmStream As Stream = Nothing
Dim tmpOriginalImage As System.Drawing.Image
Dim byteImageOut As Byte()
Try
   strmStream = IO.File.Open(strFileName, IO.FileMode.Open)
   Dim intFileSize As Integer = strmStream.Length - 1
   Dim bytUpFile(intFileSize) As Byte
   strmStream.Read(bytUpFile, 0, intFileSize)
   tmpOriginalImage = System.Drawing.Image.FromStream(New System.IO.MemoryStream(bytUpFile))
Catch ex As Exception
   Response.Write(ex.ToString)
Finally
   strmStream.Close()
   strmStream.Dispose()
End Try
Dim tmpGraphics As Graphics
Dim tmpResizedImage As Bitmap = New Bitmap(CInt(tmpOriginalImage.Width), CInt(tmpOriginalImage.Height))
tmpGraphics = Graphics.FromImage(tmpResizedImage)
tmpGraphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear
tmpGraphics.DrawImage(tmpOriginalImage, 0, 0, tmpResizedImage.Width + 1, tmpResizedImage.Height + 1)
Dim pn As New Pen(ColorTranslator.FromHtml("#0F8FFF"), 10)
Dim center As New Point(m_intMapX, m_intMapY)
Dim radius As Int32 = 40
Dim rect As New Rectangle(center.X - 40, center.Y - 40, radius * 2, radius * 2)
tmpGraphics.DrawEllipse(pn, rect)
Dim imageOut As System.Drawing.Image = tmpResizedImage
Dim tmpMemStream As New System.IO.MemoryStream()
imageOut.Save(tmpMemStream, System.Drawing.Imaging.ImageFormat.Png)
byteImageOut = tmpMemStream.ToArray()
If byteImageOut IsNot Nothing Then
   Response.Buffer = True
   Response.Cache.SetCacheability(HttpCacheability.NoCache)
   Response.ContentType = "image/PNG"
   Response.AddHeader("content-disposition", "attachment;filename=MyCoolPicture.png")
   Response.BinaryWrite(byteImageOut)
   Response.Flush()
   Response.End()
End If