WindowsPhone: Write Text on Image (C#-XAML)

Introduction:

Recently one of my blog follower was requested for a sample as 'he want to write text on image with MouseMove event'.For this question my previous article is enough but not efficient.Because there i was set text on image at static (x,y) co-ordinates with help of WriteableBitmap. In this sample we need to write text on dynamic (x,y) co-ordinates and so i thought 'WriteableBitmapEx' library is best match for this requirement.Because this library adds more extensions to WriteableBitmap,there by we can do direct manipulation of a bitmap and could be used to generate fast procedural images by drawing directly to a bitmap. 

Requirements:

1)This sample is targeted on windowsphone 8.0 OS
2)Additionally we need to add 'WriteableBitmapExWinPhone' dll from 'http://writeablebitmapex.codeplex.com/'

Description:

Lets start development with following steps
Step 1:

• Open Visual Studio
• Create new project name(Ex: "ImagePixelsAtler")
• Add 'WriteableBitmapExWinPhone' dll from link .(or) you may get dll by unzip this sample source code from below of this post. And make sure dll added to references like this
  

Step 2:

Open MainPage.xaml and add following xaml code having two image controls and one button

XAML

<Grid x:Name="ContentPanel" Margin="5"> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="Auto"/> 
                <RowDefinition Height="Auto"/> 
                <RowDefinition Height="*"/> 
            </Grid.RowDefinitions> 
            <Image Grid.Row="0" MouseMove="Image_MouseMove" Name="OrginalImage" Stretch="Fill" Height="250" Source="/Nature.jpg"/> 
            <Button Grid.Row="1" Content="ALter" Width="200" Height="80" Click="AlterButton_Click" Foreground="#FFD66A6A" BorderBrush="#FF16C71E"/> 
            <Image Grid.Row="2" Name="AlterImage" /> 
 </Grid>

Step 3:

Initialize the WriteableBitmap with OrginalImage on page load.

C#

private WriteableBitmap writeableBmp; 
        private void MainPage_Loaded(object sender, RoutedEventArgs e) 
        { 
            // Init WriteableBitmap 
            writeableBmp = new WriteableBitmap(OrginalImage,null); 
            writeableBmp.Invalidate(); 
        }

Step 4:

Get (x,y) co-ordinates of selected image area on MouseMove Event and fill writeableBmp with rectangle to draw text on original image.

C#

private void Image_MouseMove(object sender, MouseEventArgs e) 
        { 
            var mp = GetMousePoint(e); 
            writeableBmp.FillRectangle(mp.X, mp.Y, mp.X +5, mp.Y +5, Colors.Red); 
            OrginalImage.Source = writeableBmp; //set drawable text on image
        }

Note:Here to get (x,y) co-ordinates of image selected area, we need add two helper classes ControlPoint.cs ,Vector.cs which is available from sample source code of this article.

Step 5:

If you want to alter specific image pixels and replace with your object value. you can do this with existing WriteableBitmap class like this ,

C#

private void AlterImage_Click(object sender, RoutedEventArgs e)  
        {  
            ImagePixelsAlter(new ExecuteAction((bitmap) => {AlterImage.Source = bitmap; }));  
        }  
//A method for altering specific pixels of given image   
        public void ImagePixelsAlter(ExecuteAction action)  
        {  
            WriteableBitmap writeableBitmap = new WriteableBitmap(OrginalImage, null);  
            for (int i = 0; i < writeableBitmap.Pixels.Count(); i++)  
            {  
                if (i % 3 == 0) //here i am trying to alter odd pixels of image 
                {  
                    writeableBitmap.Pixels.SetValue(-95756, i);  
                }  
            }  
  
            action(writeableBitmap);  
        }  
        public delegate void ExecuteAction(WriteableBitmap bitmap);

Outputs:

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)

Windows Phone ImageMergings: Merging Image with Text/Multiple Images(C#-XAML)

Introduction

Hi guys! its quit very interesting concept for me is "Merging multiple image on single image control in windows phone" or "Merging image with text" .However in this post i am going to explain how can we achieve these two Requirements in our windows phone app with c#

Source File:WindowsPhone ImageMergings Sample

Requirements

For this sample no need for extra/third party dll's,just unzip this download sample and run it with your sdk.
Note: 1)This sample is work for both windows phone 7 and 8 sdk
         2)Due to memory limitations, if you operate too many pictures for merge, it will throw an OutOfMemoryException exception.

Description

However we can achieve this by converting our image control to WriteableBitmap and finnaly  render the text/images over the image control and position it, and then save the final merge image to media library.So that we need follow some few steps to meet simplicity

1)How to merge Image with Text

Create WriteableBitmap object as global 

C#

 WriteableBitmap wb;

 Do like this for merging image with Text

C#

private void Mergebtn_click(object sender, RoutedEventArgs e) 
        { 
            wb = new WriteableBitmap((BitmapSource)firstimage.Source); 
            TextBlock tb = new TextBlock(); 
            tb.Text = Txt.Text; 
            tb.TextWrapping = TextWrapping.Wrap; 
            tb.Foreground = new SolidColorBrush(Colors.Black); 
            tb.FontSize = 70; 
            tb.FontWeight = FontWeights.Bold; 
            wb.Render(tb, new TranslateTransform() { X = 25, Y = 191 }); 
            wb.Invalidate(); 
            FinalMergeImage.Source = wb;//Merging Image with text 
            Savebtn.IsEnabled = true; 
        } 

  Do like this for saving merged image to Media Library

C#

 private void SaveMergebtn_click(object sender, RoutedEventArgs e) 
        { 
            using (MemoryStream stream = new MemoryStream()) 
            { 
                wb.SaveJpeg(stream, wb.PixelWidth, wb.PixelHeight, 0, 100); 
                stream.Seek(0, SeekOrigin.Begin); 
                using (MediaLibrary mediaLibrary = new MediaLibrary()) 
                    mediaLibrary.SavePicture("Picture.jpg", stream); 
            } 
            MessageBox.Show("Picture Saved to media library..."); 
        }

ScreenShot

2)How to merge Multiple Images on single image control

C#

BitmapImage finalImage = new BitmapImage(); 
 WriteableBitmap wbFinal;

C#

private void Mergebtn_click(object sender, RoutedEventArgs e) 
        { 
            string[] files = new string[] { "Roses-Most-Beautiful-485x728.jpg", "Lovely-Sea-House-485x728.jpg"}; // Image list. 
            List<BitmapImage> images = new List<BitmapImage>(); // BitmapImage list. 
            int width = 0; // Final width. 
            int height = 0; // Final height. 
 
            foreach (string image in files) 
            { 
                // Create a Bitmap from the file and add it to the list                 
                BitmapImage img = new BitmapImage(); 
                StreamResourceInfo r = System.Windows.Application.GetResourceStream(new Uri(image, UriKind.Relative)); 
                img.SetSource(r.Stream); 
 
                WriteableBitmap wb = new WriteableBitmap(img); 
 
                // Update the size of the final bitmap 
                width = wb.PixelWidth > width ? wb.PixelWidth : width; 
                height = wb.PixelHeight > height ? wb.PixelHeight : height; 
 
                images.Add(img); 
            } 
 
            // Create a bitmap to hold the combined image  
            
              
            StreamResourceInfo sri = System.Windows.Application.GetResourceStream(new Uri("White.jpg", 
                UriKind.Relative)); 
            finalImage.SetSource(sri.Stream); 
 
            wbFinal = new WriteableBitmap(finalImage); 
            using (MemoryStream mem = new MemoryStream()) 
            { 
                int tempWidth = 0;   // Parameter for Translate.X 
                int tempHeight = 0;  // Parameter for Translate.Y 
 
                foreach (BitmapImage item in images) 
                { 
                    Image image = new Image(); 
                    image.Height = item.PixelHeight; 
                    image.Width = item.PixelWidth; 
                    image.Source = item; 
 
                    // TranslateTransform                       
                    TranslateTransform tf = new TranslateTransform(); 
                    tf.X = tempWidth; 
                    tf.Y = tempHeight; 
                    wbFinal.Render(image, tf); 
 
                    tempHeight += item.PixelHeight; 
                } 
 
                wbFinal.Invalidate(); 
                wbFinal.SaveJpeg(mem, width, height, 0, 100); 
                mem.Seek(0, System.IO.SeekOrigin.Begin); 
 
                // Show image.                
                finalmergeimage.Source = wbFinal;//Mergin Multiple Image into single Image 
                txtblck.Visibility = Visibility.Visible; 
                Savebtn.IsEnabled = true; 
            } 
 
             
        }

ScreenShot  

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)