前言
工作之余, 打算自己开发款简单的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;
}
