Windows Phone practical development skills (38): Image Stitching

Image Mosaic is a type of puzzle. Several images are spliced into a large image. This article describes how to splice images in windows phone.

First, we prepare some original image of the Puzzle. the length and width of these images are different, and they are not proportional.

private int width = 480;private int totalHeight = 0;string[] array = new string[] { "1.jpg", "2.jpg", "3.jpg", "4.jpg" };WriteableBitmap[] imagearray;int[] heightarray;

Definition of some constants. array stores the list of images to be spliced.

Imagearray stores the WriteableBitamp object corresponding to the image.

Heightarray stores the scaled Image Height (480 in width)

TotalHeight indicates the total height of the image after splicing.

We can create a ScrollViewer on the page, place all the images in a Canvas, set the distance from the image to the top, and finally add the Canvas to ScrollViewer:

private void Join(){    //images container    Canvas canvas = new Canvas();    //init array    imagearray = new WriteableBitmap[array.Length];    heightarray = new int[array.Length];    for (int i = 0; i < array.Length; i++)    {        WriteableBitmap bitmap = FromContent(string.Format("Images/{0}", array[i]));        double wr = width / (double)bitmap.PixelWidth;        int height = (int)(bitmap.PixelHeight * wr);        Image img = new Image() { Source = bitmap, Stretch = Stretch.Fill, Width = width, Height = height };        Canvas.SetLeft(img, 0);        Canvas.SetTop(img, totalHeight);        canvas.Children.Add(img);        totalHeight += height;        imagearray[i] = bitmap;        heightarray[i] = height;    }    canvas.Height = totalHeight;    scrollviewer.Content = canvas;}

Note that the image is scaled proportionally. To prevent the image from being recomputed when it is saved, we save the height and image to the data.

Let's take a look at the Save method. We need to get a WriteableBitmap of ScrollViewer. Can we use a screenshot of the UI element directly? The answer is no, because we can only get screenshots of the screen size and cannot get the entire long image.

So what should we do? In fact, the idea is the same as the display method above. We splice the image. The specific code is as follows:

// Traverse, copy each image to the corresponding position of the big image WriteableBitmap output = new WriteableBitmap (width, totalHeight); int toTop = 0; for (int I = 0; I <imagearray. length; I ++) {var wb = imagearray [I]. resize (width, heightarray [I], WriteableBitmapExtensions. interpolation. nearestNeighbor); Rect dest = new Rect (0, toTop, width, heightarray [I]); Rect source = new Rect (0, 0, width, heightarray [I]); output. BITs (dest, wb, source); toTop + = heightarray [I];} SaveImage (output );

Traverse the image and copy the image to some parts of a large image.

To save an image to an album, you can also save it to an independent Bucket:

Private void SaveImage (WriteableBitmap bit) {string msg = ""; try {byte [] imageBuffer; using (MemoryStream memoryStream = new MemoryStream () {bit. saveJpeg (memoryStream, bit. pixelWidth, bit. pixelHeight, 0,100); imageBuffer = memoryStream. toArray ();} using (MediaLibrary library = new MediaLibrary () {library. savePicture (string. format ("201702.16.jpg", DateTime. now. toFileTime (). toString (), imageBuffer);} msg = "saved successfully";} catch (Exception ex) {msg = "failed to save";} finally {MessageBox. show (msg );}}

You can find the source code here.