Make a Seamless Repeating Background Image - March 2012

If you download this tip please consider making a modest donation.

Last month's tip demonstrated how to Dynamically Change Background Images. Click here to view that tip. The preferred background image uses a seamless format - much like wallpaper you would hang in your home.  This application creates a seamless image by mirroring the original image both vertically and horizontally. This allows any image to be made into a seamless image. An example:

Kites_DRiver_0491_237x400

Original Vertical
Horizontal Both

The Demo Application

The Asp.Net, VB.Net, VS/2008 project MakeSeamlessRepeatingBackgroundImage is documented using screen captures:

Click here to run the demo application. This page is displayed.
You can run the demo is one of two modes.
Start by going through the stages used to mirror the original image.
Click the stage 1 to 5 buttons to display the mirrored images.
After performing stage 5 another button will be displayed which when clicked
will combine the staged images into one seamless image.

This is the result of clicking the stage 1 button. The stage 2 button is enabled.
Continue through each stage.

After stage 1, ready for stage 2.

After all stages are completed the seamless image is displayed.
Start over by clicking the Reset button.
Download the image by clicking the Download button.
Click the Background button to splash the image onto the page.
Click the Hide button do hide the image and just show the background.

The seamless image.

Use the Upload mode to copy an image from your computer to the server and make a seamless image.
Click the Browse button to search for an image on your computer.
Click Upload to copy the image to the server and create a seamless image all in one step.

Click the Hide button to hide the seamless image which results
in just the image being shown as a background image on the page.

The result after clicking the Hide button. Shows the page without the created seamless image.
Click Show to display the created seamless image again.

The PhoenixAtNight seamless background image.

Click the Download button to send the seamless image to your computer.

You could also right-mouse click on the image
then select select 'Save picture as...'.

Class Module cMakeSeamlessRepeatingBackgroundImage

Class module cMakeSeamlessRepeatingBackgroundImage contains three public functions:

Function Description
MirrorImage(sFileName, bVertical, sFileNameOriginal, sSuffix) sFileName is the image's filename to be mirrored. If bVertical is True then a vertical mirror transformation is performed. Otherwise a horizontal transformation is performed. sFileNameOriginal is the original filename. The new image is saved as the original file name with the suffix appended. Unless the image contains the word 'Seamless' the string "_Temp_" is appended to the suffix. The new image's filename is returned.
CombineImages(sFileName1, sFileName2, sFileNameOriginal, bVertical, sSuffix ) sFileName1 and sFileName2 are combined into one image. sFileNameOriginal is the original filename. If bVertical is True then the images are combined side by side. Otherwise the images are stacked. The new image is saved as the original file name with the suffix appended. Unless the image contains the word 'Seamless' the string "_Temp_" is appended to the suffix. The new image's filename is returned. The 'final' seamless version contains the string "_Seamless" in it's file name.
DeleteTempFiles() The interim mirrored files contain the string '_Temp_". These interim files are deleted when the application starts. Function DeleteTempFiles is used to delete them.

Inspiration

This link [http://yotamarker.justforum.net/t32-vbnet-mirror-an-image] shows how to mirror an image. An image's file name is passed to function MirrorImage and the mirrored image's file name is returned. I revised the code to mirror an image in both vertical and horizontal modes. The tip had a significant error. The function returned an image one pixel offset. I corrected the code.

This link [http://en.allexperts.com/q/VB-NET-3306/Concatenating-graphic-files.htm] shows how to combine images. Two image file names are passed to the CombineImages function and the file name of the combined image is returned.

Download the VB.Net Code

Download the source code by clicking on the zipped file name. Click here to run the demo application.

Download - Source Zipped File Size
VS/2008 VB.Net, ASP.Net Solution MakeSeamlessRepeatingBackgroundImage.zip 72k

Previous Tip    Tip Index    Next Tip

Home

Updated 2012/04/01