How to overlay a bitmap with transparency over another bitmap ? RRS feed

  • Question

  • Hi,

    I'd like to write a small program that does the following:

    - Take a picture (.jpeg)
    - Take another picture with transparency (a .png file)
    - overlays the png picture on bottom right of the first picture.

    I guess I can use a grid and NewRenderTargetBitmap but I just can't figure out how to do this...

    Thanks for any advices.
    Thursday, June 11, 2009 9:50 PM

All replies

  • What do you want to do with the result? Display it, save it into a new file?

    You could display it simply by stacking two <Image /> controls (e.g. put them both inside a <Grid>). WPF natively supports .png transparency, so if you put them in the correct order you will get the result you want. You can easily put the overlay at the bottom right, using HorizontalAlignment="Right" VerticalAlignment="Bottom".

    If you want to save the result you can take the same route and simply save the resulting Visual into a file. Look here for a way to do that:
    Actually, read the comments there as well, there are interesting alternative ways.
    Thursday, June 11, 2009 11:26 PM
  • Thanks. I want the result to be in a file.

    Input : 1 Jpeg, 1 Png file
    Output : 1 Jpeg with the png overlayed as a signature in the bottom right.

    Friday, June 12, 2009 5:30 AM
  • I tried this but it doesn't work well !

    - Despite I use .PNG file with transparency, it gives me sometimes a grey bar in the bottom right. Probably because gird size do not match but I can't understand why ???
    - I'm confused with PixelWidth and Width.

    Who can help me debug this following code ? Thanks

           void SignPicture (string filePath)

                BitmapImage original = new BitmapImage(new Uri(filePath));
                BitmapImage signature = new BitmapImage(new Uri("c:/signature.png"));
                Image ori = new Image();
                ori.Source = original;
                Image sign = new Image();
                sign.Source = signature;
                Grid main = new Grid();
                Grid signaGrid = new Grid();

                double ratio = (double) original.PixelWidth / (double) original.PixelHeight;
                double vwidth = 400;
                double vheight = Math.Floor (vwidth / ratio);

                double otherwidth = original.PixelWidth - vwidth;
                double otherheight = original.PixelHeight - vheight;

                RowDefinition rd = new RowDefinition();
                rd.Height = new GridLength(otherheight, GridUnitType.Pixel);
                RowDefinition rd1 = new RowDefinition();
                rd1.Height = new GridLength(vheight, GridUnitType.Pixel);
                ColumnDefinition cd = new ColumnDefinition();
                cd.Width = new GridLength(otherwidth, GridUnitType.Pixel);

                ColumnDefinition cd1 = new ColumnDefinition();
                cd1.Width = new GridLength(vwidth, GridUnitType.Pixel);
                // Add the signature image
                Grid.SetRow(sign, 1);
                Grid.SetColumn(sign, 1);
                // Render everything
                RenderTargetBitmap bmp = new RenderTargetBitmap(original.PixelWidth, original.PixelHeight,
                    original.DpiX, original.DpiY, PixelFormats.Pbgra32);
                main.Measure(new Size(original.Width, original.Height));
                main.Arrange(new Rect (0,0, original.Width, original.Height));
                JpegBitmapEncoder encoder = new JpegBitmapEncoder();
                BitmapFrame bf = BitmapFrame.Create(bmp);

                FileStream stream;
                stream = new FileStream("c:/result.jpg", FileMode.Create);
    Thursday, June 18, 2009 5:48 PM