I'm experiencing some issues with uploading & resizing images on my
website. I'm taking images that are uploaded to my page and upscaling
them to 300dpi if they are below that resolution and adjusting their
pixel width & height to what I need.

Somewhere in the process of creating the new modified image the page
seems to be introducing artifacts in the image along with changes to
the colors that are noticable when viewed in photoshop or when printed
out. I'm thinking the the interpolation mode might have somethign to
do with it, but I've already set that at HighQualityBicubic, so I'm
not sure what else it could be.

I've included the code below, does anyone have any suggestions about
what could be happening, or possible solutions (that don't require
buying some control)? If any additional information is needed please
let me know. Thank you.

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Private Sub btnUploadLogo_Click(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles btnUploadLogo.Click

Dim imgLogoOrig As Image =
Image.FromStream(txtLogo.PostedFile.InputStream)

Resize(imgLogoOrig)

imgLogoOrig.Dispose()

End Sub

Private Sub Resize(ByVal OriginalImage As Image)

Dim imgLogoResize As Image = Nothing
Dim fileName As String

Try
imgLogoResize = FixedSize(OriginalImage, 1.3333, 0.7638,
300)

fileName = "test.jpg"

imgLogoResize.Save(Convert.ToString(Server.MapPath ("\Images
\") & fileName), ImageFormat.Jpeg)

imgLogo.ImageUrl =
Convert.ToString(System.Configuration.Configuratio nSettings.AppSettings("http:
\\localhost\images\")) & fileName

'These images will show up huge on the web, being 300dpi,
need to drop them down to the 72dpi sizes.
imgLogo.Width =
System.Web.UI.WebControls.Unit.Pixel(Convert.ToInt 32((imgLogoResize.Width /
imgLogoResize.HorizontalResolution) * 72))
imgLogo.Height =
System.Web.UI.WebControls.Unit.Pixel(Convert.ToInt 32((imgLogoResize.Height /
imgLogoResize.VerticalResolution) * 72))

imgLogo.AlternateText = fileName
imgLogo.Visible = True

imgLogoResize.Dispose()

Catch ex As Exception
lblLogoError.Text = ex.Message
End Try

End Sub

Private Function FixedSize(ByVal imgPhoto As Image, ByVal
WidthInches As Single, ByVal HeightInches As Single, ByVal Resolution
As Integer) As Image

'Source image size in inches
Dim sourceWidthInches As Single
Dim sourceHeightInches As Single

sourceWidthInches = imgPhoto.Width /
imgPhoto.HorizontalResolution
sourceHeightInches = imgPhoto.Height /
imgPhoto.VerticalResolution

'Source image size in pixels
Dim sourceWidthPixels As Integer
Dim sourceHeightPixels As Integer

sourceWidthPixels = Convert.ToInt32((sourceWidthInches *
imgPhoto.HorizontalResolution))
sourceHeightPixels = Convert.ToInt32((sourceHeightInches *
imgPhoto.VerticalResolution))

Dim nPercent As Single
Dim nPercentW As Single
Dim nPercentH As Single

'how close is the source width & height to the desired width &
height in inches?
nPercentW = WidthInches / sourceWidthInches
nPercentH = HeightInches / sourceHeightInches

'if we have to pad the height pad both the top and the bottom
with the difference between the scaled height and the desired height
If nPercentH < nPercentW Then
nPercent = nPercentH
Else
nPercent = nPercentW
End If

'New width & heights of the image properly scaled up or down
accoring to Resolution. Will not exceed either max width or max height
(proportional scaling)
Dim destWidth As Integer = CInt((sourceWidthInches * nPercent)
* Resolution)
Dim destHeight As Integer = CInt((sourceHeightInches *
nPercent) * Resolution)

'Create a new blank bitmap to fit the new image in, set to the
desired resolution
Dim bmPhoto As Bitmap = New Bitmap(destWidth, destHeight,
PixelFormat.Format64bppArgb)
bmPhoto.SetResolution(Resolution, Resolution)

'Create new graphics image to handle picture quality and any
other options (such as padding space color, if desired)
Dim grPhoto As Graphics = Graphics.FromImage(imgPhoto)
Dim imgAttributes As New
System.Drawing.Imaging.ImageAttributes

imgAttributes.SetWrapMode(WrapMode.TileFlipXY)

grPhoto.InterpolationMode =
InterpolationMode.HighQualityBicubic
grPhoto.SmoothingMode = SmoothingMode.HighQuality
grPhoto.PixelOffsetMode = PixelOffsetMode.HighQuality
grPhoto.CompositingQuality = CompositingQuality.HighQuality
grPhoto.CompositingMode = CompositingMode.SourceCopy

'Draw the new image to the correct sizes
grPhoto.DrawImage(imgPhoto, New Rectangle(0, 0, destWidth,
destHeight), 0, 0, sourceWidthPixels, sourceHeightPixels,
GraphicsUnit.Pixel, imgAttributes)

grPhoto.Dispose()
imgAttributes.Dispose()

Return bmPhoto

End Function

Changing resolution and increasing sizes are renowned for reducing image
quality. Another thing that compounds problems and creates artefacts is
saving images in JPEG format that were originally in JPEG format. The image
compression system for JPEG is lossy and you will see square shaped
artefacts appear on your image. These will get worse with each successive
save.

--
--
Bob Powell [MVP]
Visual C#, System.Drawing

Ramuseco Limited .NET consulting
http://www.ramuseco.com

Find great Windows Forms articles in Windows Forms Tips and Tricks
http://www.bobpowell.net/tipstricks.htm

Answer those GDI+ questions with the GDI+ FAQ
http://www.bobpowell.net/faqmain.htm

All new articles provide code in C# and VB.NET.
Subscribe to the RSS feeds provided and never miss a new article.


"Amoril" <amoril (AT) gmail (DOT) com> wrote

In more cases than not, it's downsizing an image while up sizing its
resolution. Basically taking a 72dpi picture that is 5 inches square
and increasing the resolution to 300dpi and decreasing the size to 1
inch. I can see some image degradation happening here, but I wouldn't
think it to be considerable. I do see the square shaped artifacts that
you mention, usually in a multitude of colors and enough to show a
pattern in the white space of the image if printing or magnified in
photoshop.

Is this a general limitation of .net's gdi+ drawing system? I can do
these same tasks in photoshop without any loss of quality, even if I'm
re-saving .jpg's. Do you know of any ways to limit the affects of this
or any better approaches out there?

Thank you.

On Dec 11, 9:43 am, "Bob Powell [MVP]" <b... (AT) spamkillerbobpowell (DOT) net>
wrote:

Yes, this is a general limitation of GDI+ I suspect that photoshop will
re-use as much as possible of the original compression information and will
possibly allow resolution changes without having to re-encode the image.
GDI+ however must decompress the image into a raster format before it can
re-write it in whatever compression ratio is desired. Th only way to ensure
identical image quality is to save at 100% (no compression) but then
obviously the image files become very large.

--
--
Bob Powell [MVP]
Visual C#, System.Drawing

Ramuseco Limited .NET consulting
http://www.ramuseco.com

Find great Windows Forms articles in Windows Forms Tips and Tricks
http://www.bobpowell.net/tipstricks.htm

Answer those GDI+ questions with the GDI+ FAQ
http://www.bobpowell.net/faqmain.htm

All new articles provide code in C# and VB.NET.
Subscribe to the RSS feeds provided and never miss a new article.


"Amoril" <amoril (AT) gmail (DOT) com> wrote

Thanks for your help Bob, setting the jpeg quality to 100% (followed
the faq on your website), eliminated the artifacts that I was getting
with my upload process. The file size increase isn't much of an issue
since the images are only about 1.5 inches in size anyways. Obviously
this won't help with images that start with a poor quality, but the
higher quality ones now look & print much better than before. Thanks.