Quartz 2D 简单应用【打水印】&&【图片裁剪】&&【屏幕截图】

最新推荐文章于 2021-01-11 16:26:53 发布

JH_1995

最新推荐文章于 2021-01-11 16:26:53 发布

阅读量447

点赞数

分类专栏： UI 文章标签： quartz

本文链接：https://blog.csdn.net/JH_1995/article/details/50495119

版权

UI 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

打水印

一、代码实现

    UIImage *bgImage = [UIImage imageNamed:@"scene"];

    // 上小文 : 基于位图(bitmap) ,  所有的东西需要绘制到一张新的图片上去

    // 1.创建一个基于位图的上下文(开启一个基于位图的上下文)
    // size : 新图片的尺寸
    // opaque : YES : 不透明,  NO : 透明
    // 这行代码过后.就相当于常见一张新的bitmap,也就是新的UIImage对象
    UIGraphicsBeginImageContextWithOptions(bgImage.size, NO, 0.0);

    // 2.画背景
    [bgImage drawInRect:CGRectMake(0, 0, bgImage.size.width, bgImage.size.height)];

    // 3.画右下角的水印
    UIImage *waterImage = [UIImage imageNamed:@"logo"];
    CGFloat scale = 0.2;
    CGFloat margin = 5;
    CGFloat waterW = waterImage.size.width * scale;
    CGFloat waterH = waterImage.size.height * scale;
    CGFloat waterX = bgImage.size.width - waterW - margin;
    CGFloat waterY = bgImage.size.height - waterH - margin;
    [waterImage drawInRect:CGRectMake(waterX, waterY, waterW, waterH)];

    // 4.从上下文中取得制作完毕的UIImage对象
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    // 5.结束上下文
    UIGraphicsEndImageContext();

    // 6.显示到UIImageView
    self.iconView.image = newImage;

    // 7.将image对象压缩为PNG格式的二进制数据
    NSData *data = UIImagePNGRepresentation(newImage);
    //    UIImageJPEGRepresentation(<#UIImage *image#>, <#CGFloat compressionQuality#>)

    // 8.写入文件
    NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"new.png"];
    [data writeToFile:path atomically:YES];

二、创建一个分类

我们可以创建一个分类把上面的代码封装起来，以后的项目中如果用到打水印的功能可以直接拿过来用

//  UIImage+WaterImage.h

#import <UIKit/UIKit.h>

@interface UIImage (WaterImage)
/**
 *  打水印
 *
 *  @param bg   背景图片
 *  @param logo 右下角的水印图片
 */
+ (instancetype)waterImageWithBg:(NSString *)bg logo:(NSString *)logo;
@end

//  UIImage+WaterImage.m

#import "UIImage+WaterImage.h"

@implementation UIImage (WaterImage)
+ (instancetype)waterImageWithBg:(NSString *)bg logo:(NSString *)logo
{
    UIImage *bgImage = [UIImage imageNamed:bg];

    // 1.创建一个基于位图的上下文(开启一个基于位图的上下文)
    UIGraphicsBeginImageContextWithOptions(bgImage.size, NO, 0.0);

    // 2.画背景
    [bgImage drawInRect:CGRectMake(0, 0, bgImage.size.width, bgImage.size.height)];

    // 3.画右下角的水印
    UIImage *waterImage = [UIImage imageNamed:logo];
    CGFloat scale = 0.2;
    CGFloat margin = 5;
    CGFloat waterW = waterImage.size.width * scale;
    CGFloat waterH = waterImage.size.height * scale;
    CGFloat waterX = bgImage.size.width - waterW - margin;
    CGFloat waterY = bgImage.size.height - waterH - margin;
    [waterImage drawInRect:CGRectMake(waterX, waterY, waterW, waterH)];

    // 4.从上下文中取得制作完毕的UIImage对象
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    // 5.结束上下文
    UIGraphicsEndImageContext();

    return newImage;
}
@end

图片裁剪

一、代码实现

直接裁剪

    // 1.加载原图
    UIImage *oldImage = [UIImage imageNamed:@"XXX"];

    // 2.开启上下文
    UIGraphicsBeginImageContextWithOptions(oldImage.size, NO, 0.0);

    // 3.取得当前的上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 4.画圆
    CGRect circleRect = CGRectMake(0, 0, oldImage.size.width, oldImage.size.height);
    CGContextAddEllipseInRect(ctx, circleRect);

    // 5.按照当前的路径形状(圆形)裁剪, 超出这个形状以外的内容都不显示
    CGContextClip(ctx);

    // 6.画图
    [oldImage drawInRect:circleRect];

    // 7.取图
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    // 8.结束
    UIGraphicsEndImageContext();

    // 9.写出文件
    NSData *data = UIImagePNGRepresentation(newImage);
    NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"new.png"];
    [data writeToFile:path atomically:YES];

    // 10.显示图片
    self.iconView.image = newImage;

裁剪完的图片上加一个小圆环

// 1.加载原图
    UIImage *oldImage = [UIImage imageNamed:@"XXX"];

    // 2.开启上下文
    CGFloat borderW = 2; // 圆环的宽度
    CGFloat imageW = oldImage.size.width + 2 * borderW;
    CGFloat imageH = oldImage.size.height + 2 * borderW;
    CGSize imageSize = CGSizeMake(imageW, imageH);
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);

    // 3.取得当前的上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 4.画边框(大圆)
    [[UIColor whiteColor] set];
    CGFloat bigRadius = imageW * 0.5; // 大圆半径
    CGFloat centerX = bigRadius; // 圆心
    CGFloat centerY = bigRadius;
    CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
    CGContextFillPath(ctx); // 画圆

    // 5.小圆
    CGFloat smallRadius = bigRadius - borderW;
    CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
    // 裁剪(后面画的东西才会受裁剪的影响)
    CGContextClip(ctx);

    // 6.画图
    [oldImage drawInRect:CGRectMake(borderW, borderW, oldImage.size.width, oldImage.size.height)];

    // 7.取图
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    // 8.结束上下文
    UIGraphicsEndImageContext();

    // 9.显示图片
    self.iconView.image = newImage;

    // 10.写出文件
    NSData *data = UIImagePNGRepresentation(newImage);
    NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"new.png"];
    [data writeToFile:path atomically:YES];

二、创建一个分类

创建一个UIImage+ClipCircleImage的分类，把上面的代码封装起来，方便以后调用

//  UIImage+ClipCircleImage.h

#import <UIKit/UIKit.h>

@interface UIImage (ClipCircleImage)
+ (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor;
@end

//  UIImage+ClipCircleImage.m


#import "UIImage+ClipCircleImage.h"

@implementation UIImage (ClipCircleImage)
+ (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor
{
    // 1.加载原图
    UIImage *oldImage = [UIImage imageNamed:name];

    // 2.开启上下文
    CGFloat imageW = oldImage.size.width + 2 * borderWidth;
    CGFloat imageH = oldImage.size.height + 2 * borderWidth;
    CGSize imageSize = CGSizeMake(imageW, imageH);
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);

    // 3.取得当前的上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 4.画边框(大圆)
    [borderColor set];
    CGFloat bigRadius = imageW * 0.5; // 大圆半径
    CGFloat centerX = bigRadius; // 圆心
    CGFloat centerY = bigRadius;
    CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
    CGContextFillPath(ctx); // 画圆

    // 5.小圆
    CGFloat smallRadius = bigRadius - borderWidth;
    CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
    // 裁剪(后面画的东西才会受裁剪的影响)
    CGContextClip(ctx);

    // 6.画图
    [oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)];

    // 7.取图
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    // 8.结束上下文
    UIGraphicsEndImageContext();

    return newImage;
}
@end

屏幕截图

一、代码实现

    // 1.开启上下文
    UIGraphicsBeginImageContextWithOptions(view.frame.size, NO, 0.0);

    // 2.将view的layer渲染到上下文
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];

    // 3.取出图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    // 4.结束上下文
    UIGraphicsEndImageContext();
    // 5.写文件
    NSData *data = UIImagePNGRepresentation(newImage);
    NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"new.png"];
    [data writeToFile:path atomically:YES];

二、创建一个分类

//  UIImage+Capture.h


#import <UIKit/UIKit.h>

@interface UIImage (Capture)
+ (instancetype)captureWithView:(UIView *)view;
@end

//  UIImage+Capture.m


#import "UIImage+Capture.h"

@implementation UIImage (Capture)
+ (instancetype)captureWithView:(UIView *)view
{
    // 1.开启上下文
    UIGraphicsBeginImageContextWithOptions(view.frame.size, NO, 0.0);

    // 2.将view的layer渲染到上下文
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];

    // 3.取出图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    // 4.结束上下文
    UIGraphicsEndImageContext();

    return newImage;
}
@end