圖像處理 圖像切割

在很多時候我們需要對一張圖片進行裁剪，儘管CALayer已經爲我們提供了很多方便，可以輕易實現圓形，圓角矩形，甚至直角＋圓角的矩形，然而在一些特殊情況下，需要對圖片進行不規則形狀（比如半個⭐️）裁剪的時候，就需要一些手段來進行圖片處理了。

當然如果用CALayer來畫path的話，任何形狀都是可以畫的，但是必須把每一個輪廓都寫一遍，而描述這些輪廓，會隨着圖形複雜度而相應的繁瑣，更糟糕的是，如果換一個形狀，就要重新進行一次複雜的描述，那簡直是噩夢。

       所以在這裏我們推薦一種簡單的辦法：Mask 切割

       這個辦法的原理很簡單，需要先準備一張切割形狀的非半透明圖片，通過與被切割圖片求交集的方式進行切割，得到的結果就是切割形狀的圖片了。比如你要把一幅圖片切割成半⭐️形的，就準備一張半⭐️形狀的mask圖，圖中需要有一個半⭐️的非透明部分，其餘部分透明，然後把希望裁剪的圖片以mask圖作爲模版裁剪，得到的就是想要的結果了.

    +   =     

 

來看看代碼：

 

    1.首先準備好原圖

    UIImage* rawImage = [UIImage imageNamed:@"photo.png”];

    2.初始化繪圖環境
    CGSize size = image.size;
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    3.將原圖先畫入內存中
    [image drawInRect:CGRectMake(0,0, size.width, size.height)];
    4.讀取mask圖片
    UIImage* mask = [UIImage imageNamed:@"mask.png"];
    5.（核心）將原圖以mask爲模版進行切割
    ［mask drawInRect:CGRectMake(0, 0, size.width, size.width)       

            blendMode:kCGBlendModeDestinationIn 

                alpha:1];
     //此處的參數可分爲source和destination，分別去共同部分和不同部分。

    6.生成想要的結果圖
    UIImage* retImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return retImage;

 

   ok,會了這招以後，接下來運用到實戰當中，比如在QQ的多人聊天組頭像（梅花狀頭像組），就可以通過這種方式來實現。

    那麼接下來可以看到，在實際情況中，主要是針對3，4，5，6人頭像進行繪製。那麼仔細觀察就會發現，其實他們是用的同一個mask,只是根據不同的人數，各自旋轉不同的角度，以及進行不同程度的縮放，最後組合而成。

    以3個頭像爲例：

    1.先計算出三個頭像的分佈

     if (imageCount == 3) {
            head_s = 26;
            CGRect rcImage = CGRectMake((bg_width - head_s) / 2, (bg_height - head_s - 3), head_s, head_s);
            [rectArray addObject:[NSValue valueWithCGRect:rcImage]];
            rcImage = CGRectMake(0, 0, head_s, head_s);
            [rectArray addObject:[NSValue valueWithCGRect:rcImage]];

            rcImage = CGRectMake((bg_width - head_s), 0, head_s, head_s );
            [rectArray addObject:[NSValue valueWithCGRect:rcImage]];

     

        }

    2.在確定三個頭像的位置後，接下來確定各自的角度 

        for ( int j=0; j<imageCount; ++j ){

            UIImage *image_inx = [imageArray objectAtIndex:j];
            if (imageCount > 2 || j == 0) {

                double angel = startAngel - 2 * j * M_PI / imageCount;

    3.然後根據各自度數進行’月牙形’裁剪
                image_inx = [self maskImageWithSize:image_inx angle:angel];

            }

            CGRect rcImage = [[rectArray objectAtIndex:j] CGRectValue];
            CGContextDrawImage(context, rcImage, image_inx.CGImage);
        }

    4.最後將三幅圖都畫在一起便得到了一個梅花狀的頭像組。