"WP 8.1 Development" How to image processing

Before the start of today's bragging program, let's Tell one thing:

About the VS version issue used to play WP 8.1 development. The requirements for the version is 2013 Update2, this is the minimum requirement, as long as this version or above can be, and update3,update4,update5 is not necessary to update it? No, the VS update is optional, and each update accumulates, so the more update, the larger the volume of the installation package. Therefore, WP development we just update2 on the line, I use is also U2. If you think the MSDN original is not good, from the address below, I have uploaded the relevant. iso to 115. This is the flagship version.

Development tools
115 Network Tray Gift Pack code: 5lbblgv09y6k
http://115.com/lb/5lbblgv09y6k

If you haven't installed VS, I'll share a little trick here. In the installation, do not tick the Windows Phone 8.0 SDK, after installation there is no 8.0 emulator and mirror, also can not develop 8.0 of the application, can only develop 8.1, and only with the real machine debugging.

After installation, you download another. Iso--windowsphone81sdkupdate1.iso, which I shared above, contains not only the 8.1 SDK, but also the 8.1 Update 1 emulator, which is the "Cortana" version.

As a result, you only have the latest 8.1 simulator installed, and no 8.0 simulator. Of course if you're going to develop a 8.0 app, install the Windows Phone 8.0 SDK, which I said was used when you only developed 8.1 apps.

=======================================================

Well, bragging program formally started, because the crew lack of money, the program's host only old Monday people, no backstage staff, a bit like Guan Royal single-pole to the feeling. Today let's blow how to do image processing, such as how to turn the image into grayscale, anti-color, black and so on.

Old week is not professional to engage in image, the old week is soy sauce Professional graduation, so the old weeks do not understand the relevant knowledge, but it does not matter, as long as we make good use of the existing API, but also to the image of some non-professional processing. We can not understand the specific structure of the image file, as long as we know how to rewrite the pixel data on the line.

To figure out how the pixel data is arranged, start by simply understanding what the common pixel format is like. These formats are defined by the Windows.Graphics.Imaging.BitmapPixelFormat enumeration, and unknown members regardless of it, we only care about the other three.

Bgra8-the last 8 represents 8 bits, that is, each color value is 8 bits, which is 1 characters, Bgra, the first byte represents the value of B (blue), the second byte represents the value of g (green), the third byte represents the value of R (Red), and the fourth byte represents the value of a (opacity). For example, suppose there is a picture with four pixels, a width of 2, a height of 2, or two rows and two columns. The structure is shown in the following table:

R = 100 G = 0 B = 200 A = 255	R = 255 G = 50 B = 32 A = 255
R = 12 G = 30 B = 90 A = 255	R = 120 G = 60 B = 75 A = 255

The pixel data is an array of characters, such as the 2*2 image above, converted to pixel data:

{   0, 255,   255, 255  , and so on. 75, 64, 120, 255}

Because the pixel format is Bgra, the first is the value of B, followed by G, then R, and finally A, that is, every four bytes represents a pixel, the above example, the image has four pixels, each point is represented by 4 bytes, so the entire image of the pixel data 4*4=16 bytes.

Byte arrangement is emitted by pixel order, from left to right, from top to bottom, first row, then second row, third row ... Line up to the last pixel point.

Rgba8... As in the above, each color value takes up one byte, but the order is different, RGBA is the most common, because the arrangement image is not biased, that is, the first byte is R, the second byte is G, the third byte is B, and the last is a. This RGB channel different order produced different effects, you can view in PS, PS in the "Layer" window has a "channel" panel, where you can see the effect of each channel.

Rgba16--as in the above, the order is also A, B-C, R-G, but each color value in RGBA16 is 16 bits, which is 2 bytes. In the pixel data, the first and second bytes collectively represent the R value, and the third, the fourth byte collectively represents the value of G, the fifth sixth byte is the value of B, and the seventh to eighth byte represents a. This mode is seldom used, because not too good set formula, hehe.

The theoretical knowledge is still abstract, let's do some practical work. The following old weeks to show you two relatively simple processing-grayscale and inverse color.

Image processing of various methods we can check the book, can be online check, anyway, there are fixed formula.

1, grayscale processing.

Here I choose the average method, that is, each pixel in the R,g,b three values to add, and then divided by 3, and then the average value to replace the original R,g,b value, A is an opacity, generally regardless of it, generate new pixel data value when a value is used in the original image of a value of the line, mainly for the RGB calculation. The code is as follows:

        /// <summary>        ///Grayscale Processing/// </summary>        Private byte[] Grayscale (byte[] rgbabuff) {            byte[] Resbytes =New byte[Rgbabuff.length];  for(inti =0; i < rgbabuff.length; i + =4)            {                byteR =Rgbabuff[i]; byteg = Rgbabuff[i +1]; byteb = Rgbabuff[i +2]; byteA = Rgbabuff[i +3]; //using the averaging method                byteEV = Convert.tobyte ((convert.todouble (R) + convert.todouble (g) + convert.todouble (b))/3d); //generate a new pixel valueResbytes[i] = resbytes[i +1] = Resbytes[i +2] =ev; Resbytes[i+3] =A; }            returnresbytes; }

My examples are in rgba8 format, each pixel requires 4 bytes, so in the For loop, I is not i++, but i + = 4, that is, each cycle jumps 4 bytes, so that each cycle will be guaranteed access to a pixel point.

2, anti-color.

Inverse color is the simplest, with 255 to reduce the RGB three values on the line, that is

NEWR = 255-oldr, newg= 255-oldg, newb= 255-oldb

        /// <summary>        ///Inverse Color/// </summary>        Private byte[] Invertpixels (byte[] rgbabuff) {            byte[] res =New byte[Rgbabuff.length];  for(inti =0; i < rgbabuff.length; i + =4)            {                byteR =Rgbabuff[i]; byteg = Rgbabuff[i +1]; byteb = Rgbabuff[i +2]; byteA = Rgbabuff[i +3]; //inverse color is the value of minus r,g,b with 255 respectively.Res[i] = (byte)(255-R); Res[i+1] = (byte)(255-g); Res[i+2] = (byte)(255-b); Res[i+3] =A; }            returnRes; }

3. Gets the pixel data of the source image.

To get the pixel data of the source image, we need to decode the image first, this should be a lot of viewers, that is, using the Windows.Graphics.Imaging.BitmapDecoder class to decode.

I suggest that you get the pixel data of a single frame image by frame, in general, the static picture is only one frame, so the Getframeasync (0) method called the Bitmapdecoder instance can get the first frame image, which is encapsulated by the Bitmapframe class. A Pixeldataprovider instance is obtained by the Getpixeldataasync method of the Bitmapframe instance. Then access the Detachpixeldata method of the Pixeldataprovider instance to get a byte array representing the pixel data.

        enumOpertype {Gray, Invert}; Private AsyncTask<bitmapsource>Imagetoprocasync (Irandomaccessstream inputstream, Opertype opt) {Bitmapdecoder decoder=awaitBitmapdecoder.createasync (Bitmapdecoder.jpegdecoderid, InputStream); //Get first frameBitmapframe frame =awaitDecoder. Getframeasync (0); //Get pixel dataPixeldataprovider PIXPRD =awaitFrame. Getpixeldataasync (Bitmappixelformat.rgba8, Bitmapalphamode.straight,Newbitmaptransform (), exiforientationmode.ignoreexiforientation, colormanagementmode.donotcolormanage); byte[] data =PIXPRD.            Detachpixeldata (); //processing            byte[] Returndata =NULL; if(opt = =opertype.gray) {returndata=grayscale (data); }            Else{returndata=invertpixels (data); }            //Create a new Bitmap objectWriteableBitmap WB =NewWriteableBitmap ((int) frame. Pixelwidth, (int) frame.            Pixelheight); //Copying DataReturndata.copyto (WB).            Pixelbuffer); returnWB; }

Opertype is a custom enumeration, gray represents grayscale processing, and invert represents inverse color processing.

Finally, please look at the effect of the audience together.

Ladies and gentlemen, thank you for watching the old weekly bragging program broadcast by Mars Television, which is given later in the source code for this episode. Thank.

Sample Download: Http://files.cnblogs.com/tcjiaan/imgProcSampleApp.zip

Welcome to the same time next century, watching the old weekly bragging special program. This program is exclusively sponsored by Mars Mobile Limited.

88.

"WP 8.1 Development" How to image processing