Quartz 2D 簡單應用【打水印】&&【圖片裁剪】&&【屏幕截圖】

打水印

一、代碼實現

    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