How to fusion logo or banner to source image
The main objective of this article is to resize the Image file to a specific width & height, save Image file to JPEG, BMP & PNG format and superimpose the logo or banner to source or main Image by using C# code in windows form application.
In this article I'll try to give a solution where you will be able to resize the large number of big file size images collected from digital camera or any media to desired width & height. It is possible to superimpose (fusion) a logo & banner on the main Image. The snapshot of this windows form application which is designed and developed in the C#.net environment, is shown in below figure.
In order to load main Image file, you need to click on LoadSource Image button and single/multiple images will be loaded into listbox control shown in figure. The required source code is given below: private void btnLoad_Click(object sender, EventArgs e)
{
OpenFileDialog ofdImgFusion = new OpenFileDialog();
ofdImgFusion.Multiselect = true;
ofdImgFusion.Filter = "Image File(*.JPG;*.PNG;*.BMP)|*.JPG;*.PNG;*.BMP";
ofdImgFusion.Title = "Select a Image File";
if (ofdImgFusion.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
lstSourceImg.Items.AddRange(ofdImgFusion.FileNames);
}
}
Now you need to select logo image by clicking on Browse button. similarly you can select banner image. The source code given below:
private void btnBrowsLogo_Click(object sender, EventArgs e)
{
OpenFileDialog ofdImgFusion = new OpenFileDialog();
ofdImgFusion.Multiselect = false;
ofdImgFusion.Filter = "Image Files(*.JPG;*.PNG;*.BMP)|*.JPG;*.PNG;*.BMP";
ofdImgFusion.Title = "Select a Image File";
if (ofdImgFusion.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
Bitmap NewImg = new Bitmap(ofdImgFusion.FileName);
pcbLogo.Image = NewImg;
txtLogo.Text = ofdImgFusion.FileName;
}
}
private void btnBrowse_Click(object sender, EventArgs e)
{
OpenFileDialog ofdImgFusion = new OpenFileDialog();
ofdImgFusion.Multiselect = true;
ofdImgFusion.Filter = "Image Files(*.JPG;*.PNG;*.BMP)|*.JPG;*.PNG;*.BMP";
ofdImgFusion.Title = "Select a Image File";
if (ofdImgFusion.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
Bitmap NewImg = new Bitmap(ofdImgFusion.FileName);
pcbBanner.Image = NewImg;
txtBanner.Text = ofdImgFusion.FileName;
}
}
You can specify the output image file saving path by clicking on Creating Output Folder button and output image file name in the textbox below of filename prefix label. private void btnOutput_Click(object sender, EventArgs e)
{
FolderBrowserDialog fbdImage = new FolderBrowserDialog();
fbdImage.ShowNewFolderButton = true;
fbdImage.ShowDialog();
txtOutputPath.Text = fbdImage.SelectedPath;
}
When you click on listbox control to select a main image the output image is previewed with logo and banner like as in figure shown in above.private void lstSourceImg_Click(object sender, EventArgs e)
{
MakeFusion();
}
public void MakeFusion()
{
if (txtLogo.Text != "" || txtBanner.Text != "")
{
int LogoPosX, LogoPosY;
Bitmap SourceImage = new Bitmap(lstSourceImg.SelectedItem.ToString());
pcbSourceImage.Image = SourceImage;
int OriginalWidth = SourceImage.Width;
int OriginalHeight = SourceImage.Height;
float ratioX = (float)Convert.ToInt16(txtWidth.Text) / (float)OriginalWidth;
float ratioY = (float)Convert.ToInt16(txtHeight.Text) / (float)OriginalHeight;
float ratio = Math.Min(ratioX, ratioY);
int NewWidth = (int)(OriginalWidth * ratio);
int NewHeight = (int)(OriginalHeight * ratio);
Image MainImage = new Bitmap(NewWidth, NewHeight);
using (Graphics GFX = Graphics.FromImage(MainImage))
{
GFX.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
GFX.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
GFX.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
GFX.DrawImage(SourceImage, new Rectangle(0, 0, NewWidth, NewHeight));
}
pcbFusionImage.Image = MainImage;
Image BaseImage = new Bitmap(NewWidth, NewHeight);
Bitmap LogoImage = new Bitmap(txtLogo.Text);
Bitmap BanarImage = new Bitmap(txtBanner.Text);
if (SourceImage.Width > SourceImage.Height)
{
rdbLandscape.Checked = true;
LogoPosX = 10;
LogoPosY = NewHeight - (BanarImage.Height + LogoImage.Height / 2);
}
else
{
rdbPortrait.Checked = true;
LogoPosX = 10;
LogoPosY = 10;
}
Graphics canvas = Graphics.FromImage(BaseImage);
canvas.DrawImage(MainImage, new Rectangle(0, 0, MainImage.Width, MainImage.Height), 0, 0, MainImage.Width, MainImage.Height, GraphicsUnit.Pixel);
canvas.DrawImage(BanarImage, new Rectangle(0, MainImage.Height - BanarImage.Height, MainImage.Width, MainImage.Height), 0, 0, MainImage.Width, MainImage.Height, GraphicsUnit.Pixel);
canvas.DrawImage(LogoImage, new Rectangle(LogoPosX, LogoPosY, LogoImage.Width, LogoImage.Height), 0, 0, LogoImage.Width, LogoImage.Height, GraphicsUnit.Pixel);
canvas.Save();
pcbFusionImage.Image = BaseImage;
btnFusion.Enabled = true;
}
else
{
MessageBox.Show("Select Logo and Banner Image then select Source Image.", "Message");
}
}
Finally, in order to save this result image you click on Save Fusion Image button. private void btnFusion_Click(object sender, EventArgs e)
{
string FNames,x;
x=string.Format("{0:HH:mm:ss}", DateTime.Now);
FNames = x.Substring(0,2);
FNames = FNames + x.Substring(3,2);
FNames = FNames + x.Substring(6, 2);
FNames = txtFilePrefix.Text + FNames;
btnFusion.Enabled = false;
StreamWriter swFusionResult = new StreamWriter(txtOutputPath.Text +"/"+ FNames+".jpg", false);
pcbFusionImage.Image.Save(swFusionResult.BaseStream, ImageFormat.Jpeg);
swFusionResult.Flush();
swFusionResult.Close();
}
The complete setup file and source code file for this solution is attached here.
How to Change the Banner/Logo at the Top of Your Web Page
Start up NetObjects Fusion. Near the top of the window, you should be able to see a section that says "Open an Existing Site". Under that line, you should see the name of your website. Click that name once.
Click the "Style" button on the toolbar near the top of the NetObjects Fusion window.
Look at the rightmost column of the NetObjects Fusion window. You should be able to see a panel labelled "Style Properties". Click the checkbox labelled "Read-only" to remove the tick. The "Read-only" checkbox prevents you from making changes to the existing style. If you don't remove this read-only checkbox, you won't be able to change the default pictures that come with this particular SiteStyle.
Near the top of the window, you should see the current logo/banner in a section labelled "Banner". Click the current picture once.
The panel on the rightmost column should change. It should now be labelled "Default Properties". Somewhere in that window, you should be able to find a line that says "Banner image". Under that line, there is a text field containing the filename of the existing picture, along with a button labelled "Browse" beside the field.
Click the Browse button.
A dialog box entitled "Picture File Open" will appear. Navigate to the place where you saved the image, and click the picture once. You should see a preview image of that logo on the right-side of the dialog box. Click the "Open" button.
The banner should now be replaced by your picture. To see how it looks like on your page in NetObjects Fusion, click the "Page" button on the toolbar to switch to Page view.
If the result is not to your liking, and you prefer to use a different picture, click the Style button again. Click the picture as before, followed by the Browse button that you clicked earlier. This will allow you to switch to a different picture. You can do this as many times as you like, till you get a picture that suits the existing site design.
Note: if you've changed your mind about replacing the banner, and want to revert back to the original image used in this SiteStyle, click the Browse button. The dialog box should show you the images folder of your current SiteStyle. Go up one folder (by clicking the "Up" arrow button near the top of the Picture File Open dialog box). Doubleclick the "banner" folder. Click the picture in that folder, followed by the "Open" button. Your logo will now be replaced with the one that came with the SiteStyle.
How to Add Pictures to Your Web Page
To add pictures to your web page, do the following.
Switch to Page view. You can do this by clicking the "Page" button on the toolbar.
In the last chapter, you clicked the blue "A" icon on the toolbar to create a text box. Look at the same toolbar. Next to that "A" icon is an icon that is supposed to look like a picture frame. Hover your mouse over that icon and a tool tip window with the word "Picture" should appear. Click that button.
Your mouse cursor should now change to the cross-shaped cursor (sometimes referred to as a crosshair cursor) that you met in chapter 1. Use it to draw a box for your picture, the same way you did for the text box previously. That is, click the spot on the page where you want your picture to appear, and drag the mouse cursor diagonally to form a box. Don't worry about the size of the box. NetObjects Fusion will change its size to fit your picture if it's too small.
The "Picture File Open" dialog box should appear. Look for your picture and click it once to select it. Then click the "Open" button on the lower right of the dialog box.
If you don't like the current position of the picture on the page, you can drag it to a spot you like.
If you want the picture to appear sandwiched between (say) two paragraphs of text, I find it easier to put each paragraph in its own text block. That way, each block can be moved independently, and you can put the picture block in between them.
Save your work by clicking "File | Save Site" from the menu. If you will remember from chapter 1, this means that you are to click the "File" item from the menu bar, and the "Save Site" item from the drop-down menu that appears.
Publish your modified web page to your web host the same way as before, by clicking the "Publish Site" button on the toolbar. This time, since you've already configured everything in chapter 1, you only need to click the "Publish" button in the "Publish Site" dialog box that appears to upload your page.
Testing Your Web Page and Solving the Problem of Misplaced Objects
Once again, after you publish your page, make sure that you check your web page in a web browser. Just because the page appears the way you want in NetObjects Fusion, doesn't mean that it will appear the same way in a real web browser.
If the various elements on your web page no longer appear in their correct positions in a web browser, it's possible that the replacement of the banner with your own logo, or the addition of some other image on your page, has caused the other elements on the page to be resized or repositioned. For example, you may find that the left column of your website has mysteriously moved to the right side when displayed in a browser.
Don't panic. What you need to do is to look at every element on your page in NetObjects Fusion (not a web browser) and try to spot the element that is no longer in the correct position. While the change may be jarring in a web browser, it may appear only as a subtle difference in NOF, so take your time to look for it. (A cool head helps, so stay calm.) For example, one or more elements may have been resized by NetObjects Fusion or perhaps slightly repositioned, so that they now overlap (or come too close to overlapping) another element.
To fix the problem, click that object once. This will put the resizing borders around that object. To resize the object, move your mouse over one of the dots along the borders and drag it to change the size of the object. Alternatively, if the object can be repositioned, and you prefer to move it to a new location, drag it accordingly.