Nonsense begins: simple realization of a number of small graph splicing into a long whole graph function.

1. Functions to be implemented

Put together these three pieces of fengdu into the following whole picture

The final diagram to save

Second, merge function operation code

Splicing multiple images in the controller,

UIImage * image1 = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"fd1" ofType:@"jpeg"]]; UIImage * image2 = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"fd2" ofType:@"jpeg"]]; UIImage * image3 = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"fd3" ofType:@"jpeg"]]; self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds]; [self.view addSubview:self.scrollView]; [WSLImageCombineOperation combineImages:@[image1,image2,image3] callBack:^(UIImage * _Nonnull resultImage) { UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.height * resultImage.size.width / resultImage.size.height,self.scrollView.frame.size.height)]; imageView.image = resultImage;  imageView.contentMode = UIViewContentModeScaleAspectFit; [self.scrollView addSubview:imageView];  self.scrollView.contentSize = CGSizeMake(imageView.frame.size.width, imageView.frame.size.height); / / save the sandbox [WSLImageCombineOperation saveImageToCache: resultImage];}];Copy the code

Three,WSLImageCombineOperationClass, realize the graph merge function

In fact, the main draw here is using CGContextRef context. After the context is opened, multiple images are drawn in the context. Finally, the context content is converted to image for display and preservation.

Before setting up context, there are a few things you need to do:

1, create,CGContextRefThe context.

Before creating a context, you need to calculate the maximum height of multiple images and the width of the widest image in the image group.

Ensure that the context meets two conditions:

(1) Sufficient height.

(2) The largest picture shall prevail and be arranged in the center.

/ / at the same time get photo set maximum width and splicing height + (void) getAllImagesMaxWidthAndTotleHeight: (NSArray callBack: (void *) images (^) (NSUInteger maxWith,NSUInteger totleHeight))callBack { CGFloat maxWidth = 0; CGFloat allImageHeight = 0; for (UIImage * image in images) { CGFloat currentImageWidth = [self imageWidth:image]; maxWidth = maxWidth < currentImageWidth ? currentImageWidth : maxWidth; allImageHeight += [self imageHeight:image]; } callBack(maxWidth,allImageHeight); } // get image width + (CGFloat)imageWidth:(UIImage *)image {return image.sie.width; } // get the image height + (CGFloat)imageHeight:(UIImage *)image {return image.size. Height; }Copy the code
2. Draw content toCGContextRefIn the context of

Before drawing, you can set the top and bottom fill colors.

/ / set a larger context fill color (here is black) CGContextSetFillColorWithColor (contextRef, [UIColor blackColor]. CGColor); CGContextFillRect(contextRef, CGRectMake(0, 0, imageWidth, imageHeight));Copy the code

Second, draw in a loop and put the complete code directly

+ (void)combineImages:(NSArray *)images callBack:(void(^)(UIImage * resultImage))callBack {// get the height and maximum width of the concatenated image [self getAllImagesMaxWidthAndTotleHeight:images callBack:^(NSUInteger imageWidth, NSUInteger imageHeight) {/ / create a color space CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB (); // Open pixel region UInt32 *imagePiexl = (UInt32 *) calLOc (imageWidth*imageHeight, sizeof(UInt32)); // Open pixel region UInt32 *imagePiexl = (UInt32 *) CalLOc (imageWidth*imageHeight, sizeof(UInt32)); CGContextRef contextRef = CGBitmapContextCreate(imagePiexl, imageWidth, imageHeight, 8, 4*imageWidth, colorSpaceRef, kCGImageAlphaNoneSkipLast); / / set a larger context fill color (here is black) CGContextSetFillColorWithColor (contextRef, [UIColor blackColor]. CGColor); CGContextFillRect(contextRef, CGRectMake(0, 0, imageWidth, imageHeight)); NSUInteger imageX = 0; NSUInteger imageY = 0 // loop over for (UIImage * image in images) {// loop over CGImageRef imageRef = image.CGImage; NSUInteger width = CGImageGetWidth(imageRef); NSUInteger height = CGImageGetWidth(imageRef); ImageX = (imagewidth-width) / 2.0; CGContextDrawImage(contextRef, CGRectMake(imageX, imageY, width, height), imageRef); } / / generated images, for external UIImageView rendering CGImageRef resultRef = CGBitmapContextCreateImage (contextRef); UIImage * resultImage = [UIImage imageWithCGImage: resultRef scale: 1.0 orientation: UIImageOrientationUp]; CallBack (resultImage); // Release used memory CGContextRelease(contextRef); CGColorSpaceRelease(colorSpaceRef); Free (imagePiexl); // Release used memory CGContextRelease(contextRef); CGColorSpaceRelease(colorSpaceRef);  CGImageRelease(resultRef); }]; }Copy the code
3. Save the image to the sandbox

Realize the function of saving pictures to sandbox

// save to sandbox + (BOOL)saveImageToCache:(UIImage *)image {NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES); Nsstrings * filePath = [[paths objectAtIndex: 0] stringByAppendingPathComponent: @ "fengdu emperor. JPG"]. NSLog(@"filePath = %@",filePath); BOOL result = [UIImagePNGRepresentation(image) writeToFile: filePath atomically:YES]; return result; }Copy the code

Print out the filePath cache path, copy it, and type it directly under “Go to Folder” on your MAC to find the corresponding sandbox file in the emulator.

Fourth, summary and thinking

The above implementation principle is relatively simple. In addition, if you want a part of a small image or the whole image pixel processing, then you need to do pixel manipulation on the image. From my personal understanding, a lot of information and data of images can be obtained through image.CGImage, such as image format, image width and height, triple color value and other specific information. As long as the last modified file conforms to the image format, all other operations are modification and stitching of binary data.

Bad code, don’t laugh, talk to each other, make progress together [fist][fist][fist].