图形基础知识点导读
- 一张图像是像素点的集合，每一个像素都是独立、明了的颜色。图像一般情况下储存成数组，可以想象成二位数组（数组的数组，矩阵）。
- 当百上千个像素点汇聚在一起就成为了图像。
- 表示图形的方式有很多种，如YUV、RGBA，最简单的：32位RGBA模式。一个颜色值存储在32位中（或4个字节）每个字节储存一个颜色通道（RGBA颜色通道）
1.图片压缩
1.1系统原生格式压缩
- png保存了许多图片信息，数据内容一般大与jpg
- jpg只有三个颜色通道RGB没有A（alpha）通道
- jpg足以满意视觉效果
- 数据大小: image.CGImage > png > jpg
- CGImage是图片解压后的原始数据
- 一般情况下，获取相册照片后，调用系统的压缩api
NSData *pngData = UIImagePNGRepresentation(UIImage * __nonnull image);
NSData *jpgData = UIImageJPEGRepresentation(UIImage * __nonnull image, CGFloat compressionQuality) //compressionQuality压缩比;
- 读取图片需要一定的时间，项目中一般要设置一个缓冲圈提示
[_pngImageV setImage:[UIImage imageWithData:pngData]];
[_jpgImageV setImage:[UIImage imageWithData:pngData]];
- 用for循环实现图片大小控制
// 压塑图片至36KB或压塑到质量的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通过Context上下文重新绘制渲染(离屏渲染)
- 用与加载小图的需求
-
drawInRect官方文档描述：在当前上下文中绘制此图像 - 通过传入的imageSize来压缩图片的大小
// 通过上下文对图片压缩处理
- (UIImage*)scaleImage:(UIImage*)image size:(CGSize)imageSize{
UIGraphicsBeginImageContext(imageSize);
[image drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();//相当于从上下文截图
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上手动修改像素点
- 根据
CGBitmapContextCreate的需要的参数以及获取对应的参数，并传入
CGContextRef contextRef = CGBitmapContextCreate(pixelBuf, width, height, bits, bitsPerRow, colorSpace, alphaInfo);
-
CGBitmapContextCreate参数的获取
CGImageRef imageRef = self.image.CGImage;//获取位图
size_t width = CGImageGetWidth(imageRef);//位图宽度
size_t height = CGImageGetHeight(imageRef);//位图高度
size_t bits = CGImageGetBitsPerComponent(imageRef);//一个通道占用了多少bit
size_t bitsPerRow = CGImageGetBytesPerRow(imageRef);//每行有多少字节
CGColorSpaceRef colorSpace = CGImageGetColorSpace(imageRef);
int alphaInfo = CGImageGetAlphaInfo(imageRef);//获取色彩空间，抽象概念。色图空间有灰色和彩色
CGDataProviderRef provideRef = CGImageGetDataProvider(imageRef);//位图转化为数据
CFDataRef dataRef = CGDataProviderCopyData(provideRef);//把数据转化为CFDataRef格式
UInt8 *pixelBuf = (UInt8 *)CFDataGetMutableBytePtr((CFMutableDataRef)dataRef);//把CFDataRef数据转化为指针形式
int lenght = (int)CFDataGetLength(dataRef);//获取数据的长度，用于处理每一个RGBA通道
- 根据上述代码的图片数据指针
pixelBuf传入一个for循环，结合一定的图形学知识实现像素点处理，简单示例如下:
//rgba有四个通道，代表每次偏移一个像素点
for (int i = 0; i < lenght; i+=4) {
//////修改原始像素RGB数据
[self eocImageFilterFormBuf:pixelBuf offset:i];
}
//遍历完后开始绘制
CGContextRef contextRef = CGBitmapContextCreate(pixelBuf, width, height, bits, bitsPerRow, colorSpace, alphaInfo);
- 图片变黑白
// 对像素点进行加工
- (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;
}
- 图片变蓝
// 对像素点进行加工
- (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 调用context的系统api渲染像素点
- 以渲染为红色例
- (UIImage*)imageWithColor:(UIColor*)color{
UIImage *rendImage = [UIImage imageNamed:@"3.jpg"];
// 1 创建上下文
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 颜色渲染区域
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;
}
内存管理相关
- 有
copycreate都要CFRelease
CFRelease(dataRef);
CFRelease(contextRef);
CFRelease(backImageRef);
3.自定义局部截屏
本质都是操作上下文context
3.1 全屏截屏与局部矩形截屏
- 截屏
- (UIImage*)imageFromView:(UIView*)view{
CGRect rect = view.frame;
// 1 创建上下文
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();
//上面和截屏是一样，下面的方法是截取当前上下文的某个位置
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 局部圆形截屏（如上传头像）
- 通过路径绘制（闭环）实现上下文自定义区域与形状的截取
- (UIImage*)circleImage:(UIImage*)image{
// 1 创建上下文
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);
// 截剪上下文为圆形 闭环的
CGContextClip(context);
// 4 把image 渲染到相应的上下文中
[image drawInRect:CGRectMake(0, 0, 200, 200)];
UIImage *backImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return backImage;
}
4.缩放
4.1 ScorllView自带的系统实现
- 设置缩放系数
_scrollview.maximumZoomScale = 5;
_scrollview.minimumZoomScale = 0.5;
- 设置代理方法
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return _imageView;
}
4.2 捏合手势实现
- (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];
}
