前言
工作之余, 打算自己開發(fā)款簡單的app玩玩。正好想了解了解GPUImage, 遂試著開發(fā)一款圖片編輯的app。個人的業(yè)余時間開發(fā)的, 肯定無法媲美專業(yè)的美圖團隊。抱著學習的態(tài)度, 開發(fā)了以下功能------(濾鏡/美顏/亮度對比度飽和度調節(jié)---使用GPUImage框架), 馬賽克,裁剪旋轉,畫筆等功能。
這里先暫時介紹馬賽克功能, 包括多種馬賽克筆觸效果---(看美圖馬賽克筆觸效果, 自己推斷出功能實現(xiàn))。
廣告 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, //每一行的像素點占用的字節(jié)數，每個像素點的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);
//創(chuàng)建要輸出的圖像
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 ;
}
原理總結:
原理總結: 比如兩張完全一樣的圖片疊加到一起, 當用小刀把上面的劃開一道口子, 撕開一塊區(qū)域, 此時下面這張圖片就顯露出來了。肉眼看上去, 還是一張完整的圖片。同理, 上面那張圖片進行馬賽克處理后, 生成的馬賽克后的圖片放在下面, 上面那張圖還是原圖, 此時,當用小刀把上面的原圖劃開一道口子(手指劃過區(qū)域), 那么底下馬賽克過后的圖片就顯露出來了, 此時肉眼看上去, 就是手指劃過區(qū)域有馬賽克效果, 周邊其余區(qū)域還是原圖,就實現(xiàn)了馬賽克畫筆功能。 美圖秀秀馬賽克其他筆觸效果也類似。通過解析美圖秀秀的ipa文件, 找到了其中一種馬賽克筆觸的素材圖, 仿佛就能知道其中的一些端倪了。素材圖如下
美圖秀秀馬賽克筆觸功能剖析
美圖其他馬賽克筆觸效果, 原理分析: 原理與真實馬賽克效果一樣, 也是如此, 只需要那張簡單的正方形小素材圖, 就可以實現(xiàn)了。 仔細觀察該素材圖, 可以發(fā)現(xiàn), 如果把該正方形小素材圖進行無限平鋪, 可以生成一張無限大的全是櫻桃的圖片(參考浴室地面的瓷磚)。把平鋪后生成的圖片放在地下, 把原圖放在上面, 手指拖動區(qū)域扣掉, 底下的櫻桃就出來咯, 這樣, 豐富多彩的馬賽克筆觸效果就實現(xiàn)咯。
馬賽克效果圖如下
平鋪代碼如下:
#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;
}
