圖形基礎(chǔ)知識(shí)點(diǎn)導(dǎo)讀
- 一張圖像是像素點(diǎn)的集合，每一個(gè)像素都是獨(dú)立您单、明了的顏色斋荞。圖像一般情況下儲(chǔ)存成數(shù)組，可以想象成二位數(shù)組（數(shù)組的數(shù)組虐秦，矩陣）平酿。
- 當(dāng)百上千個(gè)像素點(diǎn)匯聚在一起就成為了圖像。
- 表示圖形的方式有很多種悦陋，如YUV蜈彼、RGBA，最簡(jiǎn)單的：32位RGBA模式俺驶。一個(gè)顏色值存儲(chǔ)在32位中（或4個(gè)字節(jié)）每個(gè)字節(jié)儲(chǔ)存一個(gè)顏色通道（RGBA顏色通道）
1.圖片壓縮
1.1系統(tǒng)原生格式壓縮
- png保存了許多圖片信息幸逆，數(shù)據(jù)內(nèi)容一般大與jpg
- jpg只有三個(gè)顏色通道RGB沒有A（alpha）通道
- jpg足以滿意視覺效果
- 數(shù)據(jù)大小: image.CGImage > png > jpg
- CGImage是圖片解壓后的原始數(shù)據(jù)
- 一般情況下，獲取相冊(cè)照片后暮现，調(diào)用系統(tǒng)的壓縮api
NSData *pngData = UIImagePNGRepresentation(UIImage * __nonnull image);
NSData *jpgData = UIImageJPEGRepresentation(UIImage * __nonnull image, CGFloat compressionQuality) //compressionQuality壓縮比;
- 讀取圖片需要一定的時(shí)間还绘，項(xiàng)目中一般要設(shè)置一個(gè)緩沖圈提示
[_pngImageV setImage:[UIImage imageWithData:pngData]];
[_jpgImageV setImage:[UIImage imageWithData:pngData]];
- 用for循環(huán)實(shí)現(xiàn)圖片大小控制
// 壓塑圖片至36KB或壓塑到質(zhì)量的0.1，
float scale = 0.9;
NSData *jpgData = UIImageJPEGRepresentation(_albumImage, scale);
while (jpgData.length > 36*1024) {
scale = -0.1;
jpgData = UIImageJPEGRepresentation(_albumImage, scale);
if (scale <= 0.1) {
break;
}
}
1.2通過(guò)Context上下文重新繪制渲染(離屏渲染)
- 用與加載小圖的需求
-
drawInRect官方文檔描述：在當(dāng)前上下文中繪制此圖像 - 通過(guò)傳入的imageSize來(lái)壓縮圖片的大小
// 通過(guò)上下文對(duì)圖片壓縮處理
- (UIImage*)scaleImage:(UIImage*)image size:(CGSize)imageSize{
UIGraphicsBeginImageContext(imageSize);
[image drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();//相當(dāng)于從上下文截圖
return newImage;
}
UIImage *image = [UIImage imageWithData:pngData];
image = [self scaleImage:image size:CGSizeMake(100, 100)];
[self saveImageToLocal:@"context.png" fromData:UIImageJPEGRepresentation(image,1)];
2.圖片處理
2.1 Context上手動(dòng)修改像素點(diǎn)
- 根據(jù)
CGBitmapContextCreate的需要的參數(shù)以及獲取對(duì)應(yīng)的參數(shù)栖袋，并傳入
CGContextRef contextRef = CGBitmapContextCreate(pixelBuf, width, height, bits, bitsPerRow, colorSpace, alphaInfo);
-
CGBitmapContextCreate參數(shù)的獲取
CGImageRef imageRef = self.image.CGImage;//獲取位圖
size_t width = CGImageGetWidth(imageRef);//位圖寬度
size_t height = CGImageGetHeight(imageRef);//位圖高度
size_t bits = CGImageGetBitsPerComponent(imageRef);//一個(gè)通道占用了多少bit
size_t bitsPerRow = CGImageGetBytesPerRow(imageRef);//每行有多少字節(jié)
CGColorSpaceRef colorSpace = CGImageGetColorSpace(imageRef);
int alphaInfo = CGImageGetAlphaInfo(imageRef);//獲取色彩空間蚕甥，抽象概念。色圖空間有灰色和彩色
CGDataProviderRef provideRef = CGImageGetDataProvider(imageRef);//位圖轉(zhuǎn)化為數(shù)據(jù)
CFDataRef dataRef = CGDataProviderCopyData(provideRef);//把數(shù)據(jù)轉(zhuǎn)化為CFDataRef格式
UInt8 *pixelBuf = (UInt8 *)CFDataGetMutableBytePtr((CFMutableDataRef)dataRef);//把CFDataRef數(shù)據(jù)轉(zhuǎn)化為指針形式
int lenght = (int)CFDataGetLength(dataRef);//獲取數(shù)據(jù)的長(zhǎng)度栋荸，用于處理每一個(gè)RGBA通道
- 根據(jù)上述代碼的圖片數(shù)據(jù)指針
pixelBuf傳入一個(gè)for循環(huán)菇怀，結(jié)合一定的圖形學(xué)知識(shí)實(shí)現(xiàn)像素點(diǎn)處理凭舶，簡(jiǎn)單示例如下:
//rgba有四個(gè)通道，代表每次偏移一個(gè)像素點(diǎn)
for (int i = 0; i < lenght; i+=4) {
//////修改原始像素RGB數(shù)據(jù)
[self eocImageFilterFormBuf:pixelBuf offset:i];
}
//遍歷完后開始繪制
CGContextRef contextRef = CGBitmapContextCreate(pixelBuf, width, height, bits, bitsPerRow, colorSpace, alphaInfo);
- 圖片變黑白
// 對(duì)像素點(diǎn)進(jìn)行加工
- (void)eocImageFilterFormBuf:(UInt8*)pixelBuf offset:(int)offset{
//不處理alpha通道
int offsetR = offset;
int offsetG = offset + 1;
int offsetB = offset + 2;
int red = pixelBuf[offsetR];
int green = pixelBuf[offsetG];
int blue = pixelBuf[offsetB];
int gray = (red + green + blue)/3;
pixelBuf[offsetR] = gray;
pixelBuf[offsetG] = gray;
pixelBuf[offsetB] = gray;
}
- 圖片變藍(lán)
// 對(duì)像素點(diǎn)進(jìn)行加工
- (void)eocImageFilterFormBuf:(UInt8*)pixelBuf offset:(int)offset{
//不處理alpha通道
int offsetR = offset;
int offsetG = offset + 1;
int offsetB = offset + 2;
int red = pixelBuf[offsetR];
int green = pixelBuf[offsetG];
int blue = pixelBuf[offsetB];
pixelBuf[offsetR] = red * 0.3;
pixelBuf[offsetG] = green * 0.3;
pixelBuf[offsetB] = blue * 0.3;
}
- 效果瀏覽
blue.png
grey.png
2.1 調(diào)用context的系統(tǒng)api渲染像素點(diǎn)
- 以渲染為紅色例
- (UIImage*)imageWithColor:(UIColor*)color{
UIImage *rendImage = [UIImage imageNamed:@"3.jpg"];
// 1 創(chuàng)建上下文
UIGraphicsBeginImageContext(rendImage.size);
// 2 獲取上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 3 把圖片渲染到上下文
[rendImage drawInRect:CGRectMake(0, 0, rendImage.size.width, rendImage.size.height)];
UIColor *redColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.5];
CGContextSetFillColorWithColor(context, redColor.CGColor);
// 3 把顏色渲染到上下文
CGContextSetBlendMode(context, kCGBlendModeNormal);
// 4 顏色渲染區(qū)域
CGContextFillRect(context, CGRectMake(0, 0,rendImage.size.width, rendImage.size.height));
// 5 生成圖片
CGImageRef imageRef = CGBitmapContextCreateImage(context);
UIImage *redImage = [UIImage imageWithCGImage:imageRef];
CFRelease(imageRef);
UIGraphicsEndImageContext();
// 裁剪
return redImage;
}
內(nèi)存管理相關(guān)
- 有
copycreate都要CFRelease
CFRelease(dataRef);
CFRelease(contextRef);
CFRelease(backImageRef);
3.自定義局部截屏
本質(zhì)都是操作上下文context
3.1 全屏截屏與局部矩形截屏
- 截屏
- (UIImage*)imageFromView:(UIView*)view{
CGRect rect = view.frame;
// 1 創(chuàng)建上下文
UIGraphicsBeginImageContext(view.frame.size);
// 2 獲取上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 3 把view 渲染到上下吻
[view.layer renderInContext:context];
// 4 把上下文中生成圖片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
- 局部矩形截屏
- (UIImage*)imageFromView:(UIView*)view{
CGRect rect = view.frame;
UIGraphicsBeginImageContext(view.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
[view.layer renderInContext:context];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
//上面和截屏是一樣爱沟，下面的方法是截取當(dāng)前上下文的某個(gè)位置
image = [self getSubImage:CGRectMake(100, 100, _eocImageV.frame.size.width, _eocImageV.frame.size.height) image:image.CGImage];
UIGraphicsEndImageContext();
return image;
}
- (UIImage*)getSubImage:(CGRect)rect image:(CGImageRef)cgImage{
CGImageRef imageRef = CGImageCreateWithImageInRect(cgImage, rect);
UIImage *subImage = [UIImage imageWithCGImage:imageRef];
return subImage;
}
3.2 局部圓形截屏（如上傳頭像）
- 通過(guò)路徑繪制（閉環(huán)）實(shí)現(xiàn)上下文自定義區(qū)域與形狀的截取
- (UIImage*)circleImage:(UIImage*)image{
// 1 創(chuàng)建上下文
UIGraphicsBeginImageContext(CGSizeMake(200, 200));
// 2 獲取上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 3 操作上下文
CGContextSetLineWidth(context, 1);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGRect rect = CGRectMake(0, 0, 200, 200);
CGContextAddEllipseInRect(context, rect);
// 截剪上下文為圓形 閉環(huán)的
CGContextClip(context);
// 4 把image 渲染到相應(yīng)的上下文中
[image drawInRect:CGRectMake(0, 0, 200, 200)];
UIImage *backImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return backImage;
}
4.縮放
4.1 ScorllView自帶的系統(tǒng)實(shí)現(xiàn)
- 設(shè)置縮放系數(shù)
_scrollview.maximumZoomScale = 5;
_scrollview.minimumZoomScale = 0.5;
- 設(shè)置代理方法
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return _imageView;
}
4.2 捏合手勢(shì)實(shí)現(xiàn)
- (void)pinchHandel:(UIPinchGestureRecognizer*)gesture{
NSLog(@"%f", gesture.scale);
if (gesture.state == UIGestureRecognizerStateBegan) {
_preScal = 1;
}
float scaleF = gesture.scale - _preScal + 1;
_preScal = gesture.scale;
_imageView.transform = CGAffineTransformScale(_imageView.transform, scaleF, scaleF);
[_scrollview setContentSize:_imageView.frame.size];
}
