IOS 截取部分图片并显示

转载 2015年11月20日 17:10:48

转载自:http://blog.sina.com.cn/s/blog_67419c420100twix.html

在ios开发中,肯定会碰到需要截取部分图片的情况。

最终的效果类似这样:

imageimage

先看最原始的示例,显示完整的图片

写了个最简单的读取图片并显示的代码,打算以此为开始,逐渐实现截取部分图片的功能。

代码主要是,在控制器代码中:

- (void)loadView { 
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide]; 
    UIImage *image=[UIImage imageNamed:@"1.jpg"]; 
    
    UIImageView *contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 
    [contentView setImage:image]; 
    
    self.view=[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 
    [self.view addSubview:contentView]; 
}

另外,应该有一个名为1.jpg的768×1024的图片(我这里是iPad)。

 

截取整个图片

可以认为截取整个图片是截取部分图片的一个特例。对ios不熟嘛,因此打算很谨慎的推进。截取整个图片可以减少中间的复杂性。

根据API,摸索着写了一个示例,效果出乎意料:

image

代码:

- (void)loadView { 
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide]; 
    UIImage *image=[UIImage imageNamed:@"1.jpg"]; 
    
    UIImageView *contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 
    //[contentView setImage:image]; 
    
    CGRect rect = CGRectMake(0, 0, 768, 1024);//创建矩形框 
    UIGraphicsBeginImageContext(rect.size);//根据size大小创建一个基于位图的图形上下文 
    CGContextRef currentContext = UIGraphicsGetCurrentContext();//获取当前quartz 2d绘图环境 
    CGContextClipToRect( currentContext, rect);//设置当前绘图环境到矩形框 
    
    CGContextDrawImage(currentContext, rect, image.CGImage);//绘图 
    UIImage *cropped = UIGraphicsGetImageFromCurrentImageContext();//获得图片 
    UIGraphicsEndImageContext();//从当前堆栈中删除quartz 2d绘图环境 
    
    contentView.image=cropped; 
    
    self.view=[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 
    [self.view addSubview:contentView];

    [cropped release]; 
}

这个代码说明了两点:

  • 好的方面:说明我的代码起作用了,确实截取了所需的图形
  • 坏的方面:图形是颠倒的,而且是镜像的。

问题应该出在坐标系上。下面画了一个quartz 2d的坐标系,坐标原点在左下角:

image

因此以这个坐标系取图形,就会有转向180°的效果。

其实如果是对图片的缩放,而不是剪切部分图片内容,这样写就可以了:

- (void)loadView { 
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide]; 
    UIImage *image=[UIImage imageNamed:@"1.jpg"]; 
    
    //[contentView setImage:image]; 
    
    CGRect rect = CGRectMake(0, 0, 384, 512);//创建矩形框 
    UIGraphicsBeginImageContext(rect.size);//根据size大小创建一个基于位图的图形上下文 
    CGContextRef currentContext = UIGraphicsGetCurrentContext();//获取当前quartz 2d绘图环境 
    CGContextClipToRect(currentContext, rect);//设置当前绘图环境到矩形框 
    
    //CGContextRotateCTM(currentContext, 50); 
    
    //CGContextDrawImage(currentContext, rect, image.CGImage);//绘图 
    
    [image drawInRect:rect]; 
    
    UIImage *cropped = UIGraphicsGetImageFromCurrentImageContext();//获得图片 
    UIGraphicsEndImageContext();//从当前堆栈中删除quartz 2d绘图环境 
    
    UIImageView *contentView = [[UIImageView alloc] initWithFrame:rect]; 
    contentView.image=cropped; 
    
    self.view=[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 
    [self.view addSubview:contentView];

    [cropped release]; 
}

效果类似这样:

image

这个方法可以帮助我们在后续开发中实现缩略图。但是不符合现在的需求。

于是想了下面的基本思路:

image

这样,需要一个能旋转和向下移动的API。ios提供了C++界面的函数调用:

  • CGContextRotateCTM,实现角度的转换
  • CGContextTranslateCTM,可以重新设置坐标系原点,平移坐标系和移动图片是等效的

代码:

- (void)loadView { 
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide]; 
    UIImage *image=[UIImage imageNamed:@"1.jpg"]; 
    
    //[contentView setImage:image]; 
    
    CGRect rect = CGRectMake(0, 0, 384, 512);//创建矩形框 
    UIGraphicsBeginImageContext(rect.size);//根据size大小创建一个基于位图的图形上下文 
    CGContextRef currentContext = UIGraphicsGetCurrentContext();//获取当前quartz 2d绘图环境 
    CGContextClipToRect(currentContext, rect);//设置当前绘图环境到矩形框 
    
    CGContextRotateCTM(currentContext, M_PI); 
    CGContextTranslateCTM(currentContext, -rect.size.width, -rect.size.height); 
    
    CGContextDrawImage(currentContext, rect, image.CGImage);//绘图 
    
    //[image drawInRect:rect]; 
    
    UIImage *cropped = UIGraphicsGetImageFromCurrentImageContext();//获得图片 
    UIGraphicsEndImageContext();//从当前堆栈中删除quartz 2d绘图环境 
    
    UIImageView *contentView = [[UIImageView alloc] initWithFrame:rect]; 
    contentView.image=cropped; 
    
    self.view=[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 
    [self.view addSubview:contentView];

    [cropped release]; 
}

image

这个结果还有缺陷,可以看到图片是正立的了,但是图片反转了,是个镜像。

解决办法也有,不过不是操作图片了,而是操作图片所在的视图。思路是把视图看作一个位图的矩阵,对它做矩阵变换运算,使视图做镜像反转。写法很简单:

- (void)loadView { 
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide]; 
    UIImage *image=[UIImage imageNamed:@"1.jpg"]; 
    
    //[contentView setImage:image]; 
    
    CGRect rect = CGRectMake(0, 0, 384, 512);//创建矩形框 
    UIGraphicsBeginImageContext(rect.size);//根据size大小创建一个基于位图的图形上下文 
    CGContextRef currentContext = UIGraphicsGetCurrentContext();//获取当前quartz 2d绘图环境 
    CGContextClipToRect(currentContext, rect);//设置当前绘图环境到矩形框 
    
    
    CGContextRotateCTM(currentContext, M_PI); 
    CGContextTranslateCTM(currentContext, -rect.size.width, -rect.size.height); 
    //CGContextTranslateCTM(currentContext,0.0,200.0); 
    
    CGContextDrawImage(currentContext, rect, image.CGImage);//绘图 
    
    //[image drawInRect:rect]; 
    
    UIImage *cropped = UIGraphicsGetImageFromCurrentImageContext();//获得图片 
    UIGraphicsEndImageContext();//从当前堆栈中删除quartz 2d绘图环境 
    
        
    UIImageView *contentView = [[UIImageView alloc] initWithFrame:rect]; 
    contentView.image=cropped; 
    
    contentView.transform = CGAffineTransformIdentity; 
    contentView.transform = CGAffineTransformMakeScale(-1.0, 1.0);

    
    self.view=[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 
    [self.view addSubview:contentView];

    [cropped release]; 
}

 

这里的转换因子,一个是针对x轴的,一个是针对y轴的。终于可以产生这样的效果了:

image

这里参考了这个文档:

http://macdevcenter.com/pub/a/mac/2004/11/02/quartz.html

虽然是很古老的文章了,但是说的很清楚。另外,方法名称已经发生变化,需要注意。

截取部分图片

截取部分图片,比如:

image

截取左边人像部分。

实现后的代码,效果是这样的:

image

如何实现的呢,这时候才发现,其实根本不需要上面那些转换,如果不使用quartz 2d的话,截取部分图片这么简单:

- (void)loadView { 
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide]; 
    UIImage *image=[UIImage imageNamed:@"1.jpg"]; 
    
    
    CGRect rect = CGRectMake(60, 80, 331, 353);//创建矩形框 
    UIImageView *contentView = [[UIImageView alloc] initWithFrame:rect]; 
    contentView.image=[UIImage imageWithCGImage:CGImageCreateWithImageInRect([image CGImage], rect)]; 
    
    self.view=[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 
    [self.view addSubview:contentView]; 
    
    [image release]; 
}

虽然编写代码的过程是曲折的,但是摸到很多有用的东西,都是以后要用到的。


转自:http://marshal.easymorse.com/archives/3703


Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

如何截取UIImage指定大小区域

如何截取UIImage指定大小区域 有时候客户端会遇到这样的需求:从服务器获取到一张图片,只需要显示左半部分,或者中间部分等等。也就是截取UIImage指定大小区域。 //剪裁图片 -(UIIm...

iOS截取图片的一部分

UIImage * imgeee = [UIImage imageWithCGImage:CGImageCreateWithImageInRect([self.currentImageForCam...

iOS 截取屏幕当前显示的图片(可按范围截取)

为当前视图添加截取功能(此处的textImageView是截取图片操作者需求放到的地方) UIImageView *view = [[UIImageView alloc]initWithImage:...

iOS 按比例显示图片 切割后显示中心图片(缩略图)

切割后显示中心图片 + (UIImage *) image: (UIImage *) image centerInSize: (CGSize) viewsize{ CGSize size = ...
  • rpf2014
  • rpf2014
  • 2017年06月26日 17:45
  • 311

iOS开发 使用UIImagePicker从相机或相册获取图片并裁剪

今天遇到一个用户头像上传的问题,需要从相册或者相机中读取图片。代码很简单,抽取关键部分,如下: [cpp] view plain copy //load user image  ...

iOS 图片显示中遇到的压缩与裁剪问题

先上一张截图:     我们假设要在截图中的举行图片展示区显示图片,由于原图片的宽高比例与图片显示窗口的宽高比例不一定相同,所以,直接将图片扔进去会改变图片的宽高比例,展示效果不好。   ...
  • worldzhy
  • worldzhy
  • 2015年01月04日 18:44
  • 25907

如何用UIimage剪切图片,让我从一张大图上获取图片的一部分!

UIImage *image1 = [UIImage imageNamed:@"1.jpg"];     CGImageRef cgRef = image1.CGImage;     CGImag...

iOS 通过CGImageRef来进行图片的截取、裁剪

当我们想得到一张图的某一个部分的时候,可以使用CGImgaeRef来进行截图操作。 1. 首先了解CGImageRef: CGImageRef: 位图的基本概念,可以点击看他的源码,是用C语言定义的。...

ios中常用的裁剪图片方法小结

一、使用Quartaz2d的画图功能裁剪。 1.例如截取图片上的一个圆: - (UIImage *)cutCircleBg {     UIImage *baseImage = [UIImag...
  • chjx501
  • chjx501
  • 2015年03月03日 21:40
  • 1309
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IOS 截取部分图片并显示
举报原因:
原因补充:

(最多只允许输入30个字)