Fred
Fred

Reputation: 391

How to merge a picture into a WriteableBitmap?

I have a bitmap like this:

var map = new WriteableBitmap(800,800,800,800, PixelFormats.Bgr32,null);

And then i have a 50x50 png picture which i want to merge into this bitmap (transparency included) at the position offset top 100 left 150 (from the top left corner of the bitmap)

var img = new BitmapImage(new Uri(@"D:\test.png", UriKind.Absolute));

I tried things like map.WritePixels(img); but that just throws an error. How can i merge this image into the bitmap?

Upvotes: 5

Views: 2120

Answers (2)

kaym
kaym

Reputation: 11

When calculating the value for the alpha channel, make sure you are dividing floating point values, e.g. by using 255.0 instead of 255, otherwise you get only src_alpha = 1 when alpha = 255, and src_alpha = 0 otherwise. Small change, but big impact when working with semi-transparency. So my solution would look like this:

    public void Chubs_BitBltMerge(ref WriteableBitmap dest, int nXDest, int nYDest, ref BitmapImage src)
    {
        // copy the source image into a byte buffer
        int src_stride = src.PixelWidth * (src.Format.BitsPerPixel >> 3);
        byte[] src_buffer = new byte[src_stride * src.PixelHeight];
        src.CopyPixels(src_buffer, src_stride, 0);

       // copy the dest image into a byte buffer
       int dest_stride = src.PixelWidth * (dest.Format.BitsPerPixel >> 3);           
       byte[] dest_buffer = new byte[(src.PixelWidth * src.PixelHeight) << 2];
       dest.CopyPixels(new Int32Rect(nXDest, nYDest, src.PixelWidth, src.PixelHeight), dest_buffer, dest_stride, 0);

       // do merge (could be made faster through parallelization)
       for (int i = 0; i < src_buffer.Length; i = i + 4)
       {
           float src_alpha = (float)(src_buffer[i + 3] / 255.0);
           dest_buffer[i + 0] = (byte)((src_buffer[i + 0] * src_alpha) + dest_buffer[i + 0] * (1.0 - src_alpha));
           dest_buffer[i + 1] = (byte)((src_buffer[i + 1] * src_alpha) + dest_buffer[i + 1] * (1.0 - src_alpha));
           dest_buffer[i + 2] = (byte)((src_buffer[i + 2] * src_alpha) + dest_buffer[i + 2] * (1.0 - src_alpha));
       }

       // copy dest buffer back to the dest WriteableBitmap
       dest.WritePixels(new Int32Rect(nXDest, nYDest, src.PixelWidth, src.PixelHeight), dest_buffer, dest_stride, 0);
    }

Upvotes: 1

Chubosaurus Software
Chubosaurus Software

Reputation: 8161

Just copy the color values to a buffer then copy that back to the WriteableBitmap

public void Chubs_BitBltMerge(ref WriteableBitmap dest, int nXDest, int nYDest, ref BitmapImage src)
{
    // copy the source image into a byte buffer
    int src_stride = src.PixelWidth * (src.Format.BitsPerPixel >> 3);
    byte[] src_buffer = new byte[src_stride * src.PixelHeight];
    src.CopyPixels(src_buffer, src_stride, 0);

    // copy the dest image into a byte buffer
    int dest_stride = src.PixelWidth * (dest.Format.BitsPerPixel >> 3);           
    byte[] dest_buffer = new byte[(src.PixelWidth * src.PixelHeight) << 2];
    dest.CopyPixels(new Int32Rect(nXDest, nYDest, src.PixelWidth, src.PixelHeight), dest_buffer, dest_stride, 0);

    // do merge (could be made faster through parallelization)
    for (int i = 0; i < src_buffer.Length; i = i + 4)
    {
        float src_alpha = ((float)src_buffer[i + 3] / 255);
        dest_buffer[i + 0] = (byte)((src_buffer[i + 0] * src_alpha) + dest_buffer[i + 0] * (1.0 - src_alpha));
        dest_buffer[i + 1] = (byte)((src_buffer[i + 1] * src_alpha) + dest_buffer[i + 1] * (1.0 - src_alpha));
        dest_buffer[i + 2] = (byte)((src_buffer[i + 2] * src_alpha) + dest_buffer[i + 2] * (1.0 - src_alpha));
    }

    // copy dest buffer back to the dest WriteableBitmap
    dest.WritePixels(new Int32Rect(nXDest, nYDest, src.PixelWidth, src.PixelHeight), dest_buffer, dest_stride, 0);
}

public MainWindow()
{
    InitializeComponent();

    BitmapImage texture = new BitmapImage(new Uri("50x50.png", UriKind.Relative));

    Image background = new Image();
    background.Source = new BitmapImage(new Uri("backdrop.png", UriKind.Relative));
    WriteableBitmap wb = new WriteableBitmap((BitmapSource)background.Source);

    // bit the 50x50 onto the backdrop
    Chubs_BitBltMerge(ref wb, 150, 100, ref texture);

    // set the result to an Image in XAML to see the result
    //this.myImage.Source = wb;
    //this.myImage.Width = wb.PixelWidth;
    //this.myImage.Height = wb.PixelHeight;

}

enter image description here

Upvotes: 4

Related Questions