This project is read-only.

Blitting of images...

Feb 8, 2013 at 9:16 PM

I am running into few issues with using blit function and wanted to check what is that I am doing incorrect. Basically, I am trying to overlay images. I am working on an app, where in photo frames can be applied over the user's pictures. Also in the UI, I provide the users to pan/zoom and scale their image inside the frame, so that they can scale and position it as they need.

In order to do this:
1) First I am loading the frame image from the app resources and create a WritableBitmap (frameWB) and using the decoder/encoder, I scale it fit my frame size.

2) I create an empty WritabeBitmap, same size as the frame loaded in step1 and use the following code:

WriteableBitmap destWB = frameWB.Clone();

3) Load the user image, set the BitmapTransform to apply the correct scale and create a InMemoryRandomAccessStream (memStream) and from it, I create the WriteableBitmap and apply rotation as below:

WriteableBItmap wb = new WriteableBitmap(1, 1);
wb = await WriteableBitmapExtensions.FromStream(wb, memStream);
wb = WriteableBitmapExtensions.RotateFree(wb, ct.Rotation, false); // ct is my images CompositeTransform

4) I am using the Blit function to overlay my scaled image in the empty transparent bitmap (destWB) that I created in step 2 as below:

Rect sourceRect = new Rect(0, 0, wb.PixelWidth, wb.PixelHeight);
Point pt = new Point(0, 0);
pt.X = (destWB.PixelWidth - wb.PixelWidth) / 2.0 + ct.TranslateX;
pt.Y = (destWB.PixelHeight- wb.PixelHeight) / 2.0 + ct.TranslateY;
Rect destRect = new Rect(pt, new Size(wb.PixelWidth, wb.PixelHeight));

destWB.Blit(destRect, wb, sourceRect, WriteableBitmapExtensions.BlendMode.Alpha);

5) Now finally, I overlay the outer frame bitmap over the destWB as below:

Rect rect = new Rect(0, 0, destWB.PixelWidth, destWB.PixelHeight);

destWB.Blit(rect, frameWB, rect, WriteableBitmapExtensions.BlendMode.Alpha);

The final result is composite image of user image and frame. But this final image has some artifacts around the areas where the inside image and frame get overlaid. Also I notice some the flowers in the outside frame, which are pink in color change to blue. I wish I could attach some image to show the exact problem. Is there anything I am doing wrong or any known issues around blitting transparent images?

Thanks, --Ram
Feb 9, 2013 at 12:06 AM
Edited Feb 9, 2013 at 4:08 AM
Updating the code to get the Pixel data and saving BGRA format also didn't fix it.