Custom image conversion for iOS and custom image conversion for ios

Custom image conversion for iOS and custom image conversion for ios

First, we can see that an image is loaded, which is transformed randomly based on four vertices. Knowledge Point: 1. BitmapContext 2. Matrix Transformation 1. What is BitmapContextOfficial explanation: The number of components for each pixel in a bitmap graphics context is specified by a color space, defined by a CGColorSpaceRef. the bitmap graphics context specifies whether the bitmap shoshould contain an alpha channel, and how the bitmap is generated. in general: First, we create a BitmapContext Based on the image and draw an image to this BitmapContext. In this case, you can think of an image as composed of multiple colored points. The image is enlarged to form a table. Each cell represents a pixel, which contains four elements: alpha (transparency), red, green, and blue. Information contained in each pixel 1. Creation

CGContextRef contexRef = CGBitmapContextCreate(void *data, size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow, CGColorSpaceRef space, uint32_t bitmapInfo);

Data: the memory space required to create BitmapContext. malloc creates width: Image width height: Image height bitsPerComponent: the number of bytes occupied by each data in data bytesPerRow: number of digits in each row = number of columns x 4 (because each vertex has four channels) space: Color interval bitmapInfo: bitmap type, generally PremultipliedFirst (ARGB) 2. read all pixel data in the image

Unsigned char * needData = malloc (size required); needData = CGBitmapContextGetData (contexRef );

3. Read the content of a vertex

  int alpha = needData[4*n];  int red   = needData[4*n+1];  int green = needData[4*n+2];  int blue  = needData[4*n+3];

A vertex is represented by four pieces of information. 4. modify the content of a vertex.

  newData[4*n    ] = alpha;  newData[4*n + 1] = red;  newData[4*n + 2] = green;  newData[4*n + 3] = blue; 

5. New Programming of data UIImage

CGImageRef cgImage = CGBitmapContextCreateImage(newContext);_imageView.image = [UIImage imageWithCGImage:cgImage ];

There are several functions, and you need to specify a set of rules, get all the pixels, and then generate a new image from the group element. This set of rules is the corresponding matrix transformation below Ii. matrix transformation Note: Most principles of this Part are involved. If not, you can directly skip the copy code without affecting your function implementation.1. What is a matrix? If we use a row vector [X1 X2 .... Xn] represents the coordinates of a point in an n-dimensional space. m point coordinates in an n-dimensional space can be expressed as a vector set, which is a matrix.

 

That is to say, a set of all vertices in all (x, y) coordinates in a two-dimensional image is a matrix. images and some of them 2. image Transformation our common operations on images are to review, rotate, scale, and perform matrix transformation on the images. In fact, it is to change the coordinates of each point.

All the graph points are changed from the old x y coordinate to the new x 'y' coordinate.

3. common two-dimensional transformations include rotation, scaling, distortion, and Heping. These geometric operations can be converted to some basic matrix operations: these transformations are linear, but the translation operation is not linear and cannot be completed through a 2*2 matrix operation. To translate a vertex (2, 1) to three units in the x direction, and then to the y direction to four units. You can perform this operation by first using matrix multiplication and then using matrix addition. Based on these basic operations, mathematicians unify them into a 3*3 matrix. The storage format is as follows: because the third column of the Matrix representing the affine transformation is always (0, 0, 1 ), when storing a matrix, most of them only store a 2*3 array. 3. Find the corresponding graph transformation rule from the image composed of four new verticesMethod 1. we know how to use matrix multiplication to calculate the original coordinates and the four vertex coordinates after the transformation. We can use known data to create a four-element one-time equation, obtain the four locations of a B c d and then calculate the new coordinate. This method is applicable to mathematical applications. Method 2. Use the linear transformation of x y to find out the law. The pictures we obtained earlier are very well-behaved and a rectangle. If the coordinates of x relative to the space of the image are obtained, the coordinates of x are (7/11 * image width, 4/8 * Image Height, then the j and I vectors are not perpendicular to each other 90 degrees before, and then all the coordinate points in them may be displaced. For example, how can I move x to B? We can think of the above Cartesian coordinate system as a bus, all the points are sitting in the bus, we did not move in the car, and then the bus arrived at the destination, we are far away from the city. In this way, point x is moved to point B. Key point: the idea of calculation is to obtain the position of each vertex through the regular law of the old Cartesian coordinate system, find a new coordinate system rule, and move the vertex, after completing the effect achieved by the first image, we start to look for a regular image, such as the new image.

 

Since the four vertices are known, we can confirm the coordinates of the points on each edge for how long the four edges are.

 

Two vertices are identified by the upper and lower edges. Then, we can confirm the linear variation of y on an X coordinate. For example, in the past, the coordinate point at the position of the image at the position of x is y. The linear transformation in the new graph is changed to y in the left graph '. the X coordinate is fixed. At this time, we only need to input the y value in the previous coordinate to get all the coordinate points in the New Graph with a width of 1/4. Likewise, we can obtain the y linear transformation law of all vertices such as 2/4 and 3/4 in the past. Then, we need to traverse all the down vertices through a loop and obtain all y-direction points at the nth position to obtain all the coordinates. The group of coordinates then forms a new image. The key code is attached. // The array contains four dots in the upper left, upper right, and lower right of the left. The image is displayed differently.

1-(void) changeImageByPoints :( NSArray *) pointArray {2 UIImage * image = _ image; // Global image 3 float width = CGImageGetWidth (image. CGImage); 4 float height = CGImageGetHeight (image. CGImage); 5 6 CGPoint p0 = [pointArray [0] CGPointValue]; 7 CGPoint p1 = [pointArray [1] CGPointValue]; 8 CGPoint p2 = [pointArray [2] CGPointValue]; 9 CGPoint p3 = [pointArray [3] CGPointValue]; 10 11 // The absolute four vertices of pain compared with the parent view calculate the new width and height 1 2 float minLeft = MIN (p0.x, p1.x), MIN (p2.x, p3.x); 13 float minTop = MIN (p0.y, p1.y), MIN (p2.y, p3.y); 14 float shapW = KINT (MAX (Limit X, p1.x), MAX (p2.x, p3.x)-minLeft )); 15 float shapH = KINT (MAX (p0.y, p1.y), MAX (p2.y, p3.y)-minTop )); 16 17 // change point relative to image not superview18 rows x = Hangzhou X-minLeft; 19 p1.x = p1.x-minLeft; 20 p2.x = p2.x-minLeft; 21 p3.x = p3.x- MinLeft; 22 p0.y = Y-minTop; 23 p1.y = p1.y-minTop; 24 p2.y = p2.y-minTop; 25 p3.y = p3.y-minTop; 26 27 // create a bitmapcontext28 if (! _ First) {29 needData = malloc (KINT (width) * KINT (height) * 4); 30 CGContextRef imageContext = CGBitmapContextCreate (needData, width, height, 8, width * 4, CGImageGetColorSpace (image. CGImage), CGImageGetAlphaInfo (image. CGImage); 31 CGContextDrawImage (imageContext, CGRectMake (0, 0, width, height), image. CGImage); 32 data = malloc (KINT (width) * KINT (height) * 4); 33 data = CGBitmapContextGetData (imageContext); 34 _ first = YES; 35} 36 37 // initialize the data38 unsigned char * shapeData = malloc (shapW * shapH * 4) required for the new image; 39 for (int I = 0; I <shapH-1; I ++) {40 for (int j = 0; j <shapW-1; j ++) {41 int offset = (I * shapW + j) * 4; 42 shapeData [offset] = 255; 43 shapeData [offset + 1] = 255; 44 shapeData [offset + 2] = 255; 45 shapeData [offset + 3] = 255; 46} 47} 48 49 // Add the corresponding pixel value to data 50 for (int I = 0; I