前言
工作之余, 打算自己開(kāi)發(fā)款簡(jiǎn)單的app玩玩仿粹。正好想了解了解GPUImage, 遂試著開(kāi)發(fā)一款圖片編輯的app沮明。個(gè)人的業(yè)余時(shí)間開(kāi)發(fā)的, 肯定無(wú)法媲美專業(yè)的美圖團(tuán)隊(duì)。抱著學(xué)習(xí)的態(tài)度, 開(kāi)發(fā)了以下功能------(濾鏡/美顏/亮度對(duì)比度飽和度調(diào)節(jié)---使用GPUImage框架), 馬賽克,裁剪旋轉(zhuǎn),畫(huà)筆等功能惑折。
這里先暫時(shí)介紹馬賽克功能, 包括多種馬賽克筆觸效果---(看美圖馬賽克筆觸效果, 自己推斷出功能實(shí)現(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, //每個(gè)顏色值8bit
width*kPixelChannelCount, //每一行的像素點(diǎn)占用的字節(jié)數(shù)宏蛉，每個(gè)像素點(diǎn)的ARGB四個(gè)通道各占8個(gè)bit
colorSpace,
kCGImageAlphaPremultipliedLast);
CGContextDrawImage(context, CGRectMake(0, 0, width, height), imgRef);
unsigned char *bitmapData = CGBitmapContextGetData (context);
//這里把BitmapData進(jìn)行馬賽克轉(zhuǎn)換,就是用一個(gè)點(diǎn)的顏色填充一個(gè)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 ;
}
原理總結(jié):
原理總結(jié): 比如兩張完全一樣的圖片疊加到一起, 當(dāng)用小刀把上面的劃開(kāi)一道口子, 撕開(kāi)一塊區(qū)域, 此時(shí)下面這張圖片就顯露出來(lái)了肯污。肉眼看上去, 還是一張完整的圖片。同理, 上面那張圖片進(jìn)行馬賽克處理后, 生成的馬賽克后的圖片放在下面, 上面那張圖還是原圖, 此時(shí),當(dāng)用小刀把上面的原圖劃開(kāi)一道口子(手指劃過(guò)區(qū)域), 那么底下馬賽克過(guò)后的圖片就顯露出來(lái)了, 此時(shí)肉眼看上去, 就是手指劃過(guò)區(qū)域有馬賽克效果, 周邊其余區(qū)域還是原圖,就實(shí)現(xiàn)了馬賽克畫(huà)筆功能彩届。 美圖秀秀馬賽克其他筆觸效果也類似伪冰。通過(guò)解析美圖秀秀的ipa文件, 找到了其中一種馬賽克筆觸的素材圖, 仿佛就能知道其中的一些端倪了。素材圖如下
美圖秀秀馬賽克筆觸功能剖析
美圖其他馬賽克筆觸效果, 原理分析: 原理與真實(shí)馬賽克效果一樣, 也是如此, 只需要那張簡(jiǎn)單的正方形小素材圖, 就可以實(shí)現(xiàn)了樟蠕。 仔細(xì)觀察該素材圖, 可以發(fā)現(xiàn), 如果把該正方形小素材圖進(jìn)行無(wú)限平鋪, 可以生成一張無(wú)限大的全是櫻桃的圖片(參考浴室地面的瓷磚)贮聂。把平鋪后生成的圖片放在地下, 把原圖放在上面, 手指拖動(dòng)區(qū)域扣掉, 底下的櫻桃就出來(lái)咯, 這樣, 豐富多彩的馬賽克筆觸效果就實(shí)現(xiàn)咯靠柑。
馬賽克效果圖如下
平鋪代碼如下:
#pragma mark - 指定大小生成一個(gè)平鋪的圖片
- (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;
}
