Search code examples
c#windows-store-appsblitwriteablebitmapex

Windows Store App - WriteableBitmap , blit method


Alright , i am trying to merge two images(superimpose one image on top of another) using writeablebitmapex library's blit method. And after applying the blit all i am getting is a transparent image with no content.

I would like to superimpose the curtain image on top of the window image.

Source Code :

WriteableBitmap photoWriteableBitMap = await new WriteableBitmap(1,1).FromContent(new Uri("ms-appx:///Curtain1.jpg"));
WriteableBitmap frameWriteableBitMap = await new WriteableBitmap(1, 1).FromContent(new Uri("ms-appx:///Window1.jpg"));

var merge = new WriteableBitmap(750, 750);

merge.Blit(new Rect(0, 0, 100, 100), photoWriteableBitMap, new Rect(0, 0, photoWriteableBitMap.PixelWidth, photoWriteableBitMap.PixelHeight));
merge.Blit(new Rect(0, 0, 200, 200), frameWriteableBitMap, new Rect(0, 0, frameWriteableBitMap.PixelWidth, frameWriteableBitMap.PixelHeight));

// Assign the merged writeable bitmap to the image source.
imgMain.Source = merge; 

Expected Image : Expected image

Actual Image : Actual image

Please let me know what i am doing wrong.


Solution

  • I have found an answer to my solution in case anyone stumbles upon here.

    First thing , I was unnecessarily trying to include an extra bitmap(merge) for the desired output.

    All I had to do was apply the blit on the window image and set the source and the destination rectangles appropriately.

    Below is the final code which works for me ,

    WriteableBitmap photoWriteableBitMap = await new WriteableBitmap(1, 1).FromContent(new Uri("ms-appx:///Curtain1.jpg"));
    WriteableBitmap frameWriteableBitMap = await new WriteableBitmap(1, 1).FromContent(new Uri("ms-appx:///Window1.jpg"));
    
    frameWriteableBitMap.Blit(new Rect(300, 100, 250, 200), photoWriteableBitMap, new Rect(0, 0, photoWriteableBitMap.PixelWidth , photoWriteableBitMap.PixelHeight));
    

    This is how my final image looks : enter image description here