管中窥豹---美图秀秀的马赛克笔触功能

前言

工作之余, 打算自己开发款简单的app玩玩。正好想了解了解GPUImage, 遂试着开发一款图片编辑的app。个人的业余时间开发的, 肯定无法媲美专业的美图团队。抱着学习的态度, 开发了以下功能------(滤镜/美颜/亮度对比度饱和度调节---使用GPUImage框架), 马赛克,裁剪旋转,画笔等功能。
这里先暂时介绍马赛克功能, 包括多种马赛克笔触效果---(看美图马赛克笔触效果, 自己推断出功能实现)。

广告 App Store搜索 "段友键盘" https://itunes.apple.com/cn/app/%E6%AE%B5%E5%8F%8B%E9%94%AE%E7%9B%98/id1335869458?mt=8

代码

笔触效果1: 真正意义上的马赛克效果。利用原图生成马赛克图片代码如下:

#define kBitsPerComponent (8)
#define kBitsPerPixel (32)
#define kPixelChannelCount (4)

+ (UIImage *)transToMosaicImage:(UIImage*)orginImage mosaicLevel:(NSUInteger)level
{
   //获取BitmapData
   CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
   CGImageRef imgRef = orginImage.CGImage;
   CGFloat width = CGImageGetWidth(imgRef);
   CGFloat height = CGImageGetHeight(imgRef);
   CGContextRef context = CGBitmapContextCreate (nil,
                                                 width,
                                                 height,
                                                 kBitsPerComponent,        //每个颜色值8bit
                                                 width*kPixelChannelCount, //每一行的像素点占用的字节数，每个像素点的ARGB四个通道各占8个bit
                                                 colorSpace,
                                                 kCGImageAlphaPremultipliedLast);
   CGContextDrawImage(context, CGRectMake(0, 0, width, height), imgRef);
   unsigned char *bitmapData = CGBitmapContextGetData (context);
   
   //这里把BitmapData进行马赛克转换,就是用一个点的颜色填充一个level*level的正方形
   unsigned char pixel[kPixelChannelCount] = {0};
   NSUInteger index,preIndex;
   for (NSUInteger i = 0; i < height - 1 ; i++) {
      for (NSUInteger j = 0; j < width - 1; j++) {
         index = i * width + j;
         if (i % level == 0) {
            if (j % level == 0) {
               memcpy(pixel, bitmapData + kPixelChannelCount*index, kPixelChannelCount);
            }else{
               memcpy(bitmapData + kPixelChannelCount*index, pixel, kPixelChannelCount);
            }
         } else {
            preIndex = (i-1)*width +j;
            memcpy(bitmapData + kPixelChannelCount*index, bitmapData + kPixelChannelCount*preIndex, kPixelChannelCount);
         }
      }
   }
   
   NSInteger dataLength = width*height* kPixelChannelCount;
   CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, bitmapData, dataLength, NULL);
   //创建要输出的图像
   CGImageRef mosaicImageRef = CGImageCreate(width, height,
                                             kBitsPerComponent,
                                             kBitsPerPixel,
                                             width*kPixelChannelCount ,
                                             colorSpace,
                                             kCGBitmapByteOrderDefault,
                                             provider,
                                             NULL, NO,
                                             kCGRenderingIntentDefault);
   CGContextRef outputContext = CGBitmapContextCreate(nil,
                                                      width,
                                                      height,
                                                      kBitsPerComponent,
                                                      width*kPixelChannelCount,
                                                      colorSpace,
                                                      kCGImageAlphaPremultipliedLast);
   CGContextDrawImage(outputContext, CGRectMake(0.0f, 0.0f, width, height), mosaicImageRef);
   CGImageRef resultImageRef = CGBitmapContextCreateImage(outputContext);
   UIImage *resultImage = nil;
   if([UIImage respondsToSelector:@selector(imageWithCGImage:scale:orientation:)]) {
      float scale = [[UIScreen mainScreen] scale];
      resultImage = [UIImage imageWithCGImage:resultImageRef scale:scale orientation:UIImageOrientationUp];
   } else {
      resultImage = [UIImage imageWithCGImage:resultImageRef];
   }
   //释放
   if(resultImageRef){
      CFRelease(resultImageRef);
   }
   if(mosaicImageRef){
      CFRelease(mosaicImageRef);
   }
   if(colorSpace){
      CGColorSpaceRelease(colorSpace);
   }
   if(provider){
      CGDataProviderRelease(provider);
   }
   if(context){
      CGContextRelease(context);
   }
   if(outputContext){
      CGContextRelease(outputContext);
   }
   return resultImage ;
}

原理总结:

原理总结: 比如两张完全一样的图片叠加到一起, 当用小刀把上面的划开一道口子, 撕开一块区域, 此时下面这张图片就显露出来了。肉眼看上去, 还是一张完整的图片。同理, 上面那张图片进行马赛克处理后, 生成的马赛克后的图片放在下面, 上面那张图还是原图, 此时,当用小刀把上面的原图划开一道口子(手指划过区域), 那么底下马赛克过后的图片就显露出来了, 此时肉眼看上去, 就是手指划过区域有马赛克效果, 周边其余区域还是原图,就实现了马赛克画笔功能。 美图秀秀马赛克其他笔触效果也类似。通过解析美图秀秀的ipa文件, 找到了其中一种马赛克笔触的素材图, 仿佛就能知道其中的一些端倪了。素材图如下

mosaic-yingtao.png

美图秀秀马赛克笔触功能剖析

美图其他马赛克笔触效果, 原理分析: 原理与真实马赛克效果一样, 也是如此, 只需要那张简单的正方形小素材图, 就可以实现了。 仔细观察该素材图, 可以发现, 如果把该正方形小素材图进行无限平铺, 可以生成一张无限大的全是樱桃的图片(参考浴室地面的瓷砖)。把平铺后生成的图片放在地下, 把原图放在上面, 手指拖动区域扣掉, 底下的樱桃就出来咯, 这样, 丰富多彩的马赛克笔触效果就实现咯。

马赛克效果图如下

马赛克笔触-樱桃.png

平铺代码如下:

#pragma mark - 指定大小生成一个平铺的图片
- (UIImage *)getTiledImageWithSize:(CGSize)size
{
   UIView *tempView = [[UIView alloc] init];
   tempView.bounds = (CGRect){CGPointZero, size};
   tempView.backgroundColor = [UIColor colorWithPatternImage:self];
   
   UIGraphicsBeginImageContext(size);
   [tempView.layer renderInContext:UIGraphicsGetCurrentContext()];
   UIImage *bgImage = UIGraphicsGetImageFromCurrentImageContext();
   UIGraphicsEndImageContext();
   
   return bgImage;
}