UWP Dev: Capture the images you need in your current screen and save them to in-app storage

In UWP development, it is sometimes necessary to get the image information from the current screen, but it is not suitable for direct saving, because the image of the entire screen is saved, and the user is required to take screenshots. In short, it is not appropriate to get the image information needed on the screen. Pay attention to the "need" in the title.

What does that mean? Is that we can get an image from any of the UIElement in the current screen. Not much nonsense to say, or take the actual combat scenario as an example, because they have recently encountered this situation.

In doing "Jianying UWP" the "Movie Lines" module, the following: the need is: is the user click to save the picture, will be the picture and text a piece to save, to view the time, is also currently displayed in this way.

First, post the front code:

You can see that the text displayed above the picture is separate from the picture. Text is covered in the picture, if directly download the picture, there will be no text, so this is not the result I need. The simplest way to do this is to get the image information in the sub-grid directly, so that it is equivalent to the sub-grid part. That's the result I need.

Down official action:

Class used: The RenderTargetBitmap class.

The RenderTargetBitmap class can be used to convert UI elements into bitmaps, creating a picture of UI elements. And the difference is that it can define UIElement, here, all I need is the picture and the text part, which is the image information inside the word grid.

To implement and save in-app storage, you first define the file name:

String Desiredname =datetime.now.ticks+ ". jpg";

Then define the location of the file store and create the file.

Storagefolder applicationfolder = ApplicationData.Current.LocalFolder;            Storagefolder folder=await  applicationfolder.createfolderasync ("Pic", creationcollisionoption.openifexists);            StorageFile SaveFile = await folder. Createfileasync (Desiredname, creationcollisionoption.openifexists);

Then instantiate the object:

RenderTargetBitmap bitmap = new RenderTargetBitmap ();

Next, to specify which UIElement to get the image information, according to what I need, is the sub-grid, give it a name Picgird. This method allows you to specify the bitmap to get

Await bitmap. Renderasync (Picgrid);

Next note: The object of the RenderTargetBitmap class is initialized when the Renderasync method is called, but the object of the RenderTargetBitmap class cannot be stored as a picture, and the binary data of the image needs to be obtained to generate the picture file. If you want to get an image of a datatransfermanager operation, such as a shared contract interchange, or if you want to use the Windows.Graphics.Imaging API to apply an effect to an image or transcode an image, you need to use pixel data. If you want to access RenderTargetBitmap's pixels data, you need to define UIElement as RenderTargetBitmap with Renderasync this method, Then call RenderTargetBitmap's Getpixelsasync method to get its pixels data. The method returns a Ibuffer type, which stores the binary bitmap number. The ibuffer can be converted to a byte array, and the data in the array is stored in BGRA8 format. So we need to get the pixel information:

  var pixelbuffer =await bitmap. Getpixelsasync ();

And do the following conversions:

using (Var filestream=await savefile.openasync (fileaccessmode.readwrite))            {                var encoder = await Bitmapencoder.createasync (Bitmapencoder.pngencoderid, fileStream);                Encoder. Setpixeldata (Bitmappixelformat.bgra8,                     bitmapalphamode.ignore,                     (UINT) bitmap. Pixelwidth,                     (UINT) bitmap. Pixelheight,                      Displayinformation.getforcurrentview (). LOGICALDPI,                     Displayinformation.getforcurrentview (). LOGICALDPI,                     Pixelbuffer.toarray ());                Await encoder. Flushasync ();            }

In this way, you can convert the UI elements into pictures and save them.
The complete code is as follows:

 String Desiredname =datetime.now.ticks+ ". jpg";            Storagefolder applicationfolder = ApplicationData.Current.LocalFolder;            Storagefolder folder = await Applicationfolder.createfolderasync ("Pic", creationcollisionoption.openifexists); StorageFile SaveFile = await folder.            Createfileasync (Desiredname, creationcollisionoption.openifexists);            RenderTargetBitmap bitmap = new RenderTargetBitmap (); Await bitmap.            Renderasync (Picgrid); var pixelbuffer =await bitmap.            Getpixelsasync (); using (Var filestream=await savefile.openasync (Fileaccessmode.readwrite)) {var encoder = await B                Itmapencoder.createasync (Bitmapencoder.pngencoderid, FileStream); Encoder. Setpixeldata (Bitmappixelformat.bgra8, Bitmapalphamode.ignore, (UINT) bitmap. Pixelwidth, (UINT) bitmap. Pixelheight, Displayinformation.getforcurrentview (). LogicalDpi, Displayinformation.getforcurrentview ().                LOGICALDPI, Pixelbuffer.toarray ()); Await encoder.            Flushasync (); } await new Messagedialog ("Save succeeded"). Showasync ();

In this way, you can successfully save the pictures you need to apply folder view: Deploy with the local computer, and then execute the methods above. At this point, go to the application storage path, which is under the Localstate folder of the following path.

After entering, you can see the folders I created in the code:

Then you can see the picture you just acquired:

As you can see, I have successfully saved the picture in the App Store. And there are words on it. That's exactly what I want:

The final step, for my application, is how to read, and I handle reading the saved picture and displaying the method on the interface:

Background:

Front desk:

Let me explain the steps:

The first is to access the folder path, then get to the folder of all the file collection, and then traverse, assign to the object to be bound, (note the folder path and file name and filename suffix, together make up the entire file URL, the URL and image control binding), and then add the object into the collection , and finally binds the collection to the foreground gridview. OK, you are done.

Finally, I'll test it. Save a few more pictures, and then click Show this page:

As you can see, all the pictures I saved were successfully displayed. o-yes!

In this way, the entire preservation process is over, and if you have questions or are interested in UWP development, you are welcome to join my UWP Development Communication group: 193148992. Learn to communicate together.

--it Chase Dream Garden

UWP Dev: Capture the images you need in your current screen and save them to in-app storage