iOS-图形学与UIImageView的底层处理

图形基础知识点导读

• 一张图像是像素点的集合，每一个像素都是独立、明了的颜色。图像一般情况下储存成数组，可以想象成二位数组（数组的数组，矩阵）。
• 当百上千个像素点汇聚在一起就成为了图像。
• 表示图形的方式有很多种，如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;
    
}

内存管理相关

• 有copy create都要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];
    
}