裁剪圖片踩的坑

之前的項(xiàng)目中有個(gè)需求:將一個(gè)比較長(zhǎng)的列表頁(yè)(用的UITableView)截圖然后分享到微信托呕。貼出實(shí)現(xiàn)方法:

- (UIImage *)captureScrollView:(UIScrollView *)scrollView {
    UIImage* image = nil;
    UIGraphicsBeginImageContext(scrollView.contentSize);
    {
        CGSize s = scrollView.contentSize;
        //第一個(gè)參數(shù)表示區(qū)域大小槽地。第二個(gè)參數(shù)表示是否是非透明的。如果需要顯示半透明效果苔严,需要傳NO笛臣,否則傳YES。第三個(gè)參數(shù)就是屏幕密度了涵妥,關(guān)鍵就是第三個(gè)參數(shù)。
        UIGraphicsBeginImageContextWithOptions(s, NO, [UIScreen mainScreen].scale);
        CGPoint savedContentOffset = scrollView.contentOffset;
        CGRect savedFrame = scrollView.frame;
        scrollView.contentOffset = CGPointZero;
        scrollView.frame = CGRectMake(0, 0, SCREEN_WIDTH, scrollView.contentSize.height);
        
        [scrollView.layer renderInContext: UIGraphicsGetCurrentContext()];
        image = UIGraphicsGetImageFromCurrentImageContext();
        
        scrollView.contentOffset = savedContentOffset;
        scrollView.frame = savedFrame;
    }
    UIGraphicsEndImageContext();
    
    if (image != nil) {
        return image;
    }
    return nil;
}

所截的圖如下:



這個(gè)方法能順利將tableView截成長(zhǎng)圖坡锡,但是突然有天需求變了:

手續(xù)費(fèi)那一欄不能分享出去蓬网,What?

然后我的思路是截兩次鹉勒,第一次把手續(xù)費(fèi)以上的部分截下來(lái)帆锋,第二次把手續(xù)費(fèi)以下的部分截出來(lái),然后兩張圖片合成一張圖片禽额。思路有了锯厢,操起鍵盤就是一梭子代碼:

/**
 Description 從圖片中按指定的位置大小截取圖片的一部分
 @param image 原始的圖片
 @param rect 要截取的區(qū)域
 @return 截取出的圖片
 */
- (UIImage *)imageFromImage:(UIImage *)image inRect:(CGRect)rect{
    CGImageRef sourceImageRef = [image CGImage];//將UIImage轉(zhuǎn)換成CGImageRef
    /**以下為錯(cuò)誤寫法*/
    CGImageRef newImageRef = CGImageCreateWithImageInRect(sourceImageRef, CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height));//按照給定的矩形區(qū)域進(jìn)行剪裁
    UIImage *newImage = [UIImage imageWithCGImage:newImageRef];//將CGImageRef轉(zhuǎn)換成UIImage
    return newImage;//返回剪裁后的圖片
}

/**
 Description 圖片上下拼接
 @param topImage 上圖片
 @param bottomImage 下圖片
 @return 拼接后的圖片
 */
- (UIImage *)composeImgWithTopImage:(UIImage *)topImage bottomImage:(UIImage *)bottomImage {
    if (bottomImage == nil) {
        return topImage;
    }
    CGFloat topImageH = topImage.size.height;
    CGFloat topImageW = topImage.size.width;
    CGFloat bottomImageH = bottomImage.size.height;
    CGFloat bottomImageW = bottomImage.size.width;
    
    CGFloat totalHeight = SCREEN_WIDTH*topImageH/topImageW + SCREEN_WIDTH*bottomImageH/bottomImageW;
    CGSize offScreenSize = CGSizeMake(SCREEN_WIDTH, totalHeight);
    UIGraphicsBeginImageContextWithOptions(offScreenSize, NO, [UIScreen mainScreen].scale);
    CGRect rectTop = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_WIDTH*topImageH/topImageW);
    [topImage drawInRect:rectTop];
    CGRect rectBottom = CGRectMake(0, SCREEN_WIDTH*topImageH/topImageW, SCREEN_WIDTH, SCREEN_WIDTH*bottomImageH/bottomImageW);
    [bottomImage drawInRect:rectBottom];
    UIImage* imagez = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return imagez;
}

然后我兩次調(diào)用截圖傳的rect是

CGRect headerClipRect = CGRectMake(0, 0, image.size.width, [self.tableView rectForSection:2].origin.y);
CGRect footerClipRect = CGRectMake(0, [self.tableView rectForSection:3].origin.y, image.size.width, self.tableView.contentSize.height - [self.tableView rectForSection:3].origin.y);

準(zhǔn)備就緒,來(lái)看看截出來(lái)的圖是什么樣子的:


image.png

what脯倒,我到底哪里錯(cuò)了实辑?一臉驚恐

然后反復(fù)查找發(fā)現(xiàn)- (UIImage *)captureScrollView:(UIScrollView *)scrollView這個(gè)方法截出的長(zhǎng)圖的大小并不是傳入的scrollView的contentSize,而是長(zhǎng)寬各自乘以手機(jī)分辨率[UIScreen mainScreen].scale藻丢,所以對(duì)長(zhǎng)圖進(jìn)行切割的時(shí)候剪撬,按照給定的矩形區(qū)域進(jìn)行剪裁應(yīng)該這樣傳值

CGImageRef newImageRef = CGImageCreateWithImageInRect(sourceImageRef, CGRectMake(rect.origin.x*[UIScreen mainScreen].scale, rect.origin.y*[UIScreen mainScreen].scale, rect.size.width*[UIScreen mainScreen].scale, rect.size.height*[UIScreen mainScreen].scale));//按照給定的矩形區(qū)域進(jìn)行剪裁

最后的截圖合成之后應(yīng)該是這樣的:


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市悠反,隨后出現(xiàn)的幾起案子残黑,更是在濱河造成了極大的恐慌,老刑警劉巖斋否,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件梨水,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡茵臭,警方通過(guò)查閱死者的電腦和手機(jī)冰木,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人踊沸,你說(shuō)我怎么就攤上這事歇终。” “怎么了逼龟?”我有些...
    開(kāi)封第一講書人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵评凝,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我腺律,道長(zhǎng)奕短,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任匀钧,我火速辦了婚禮翎碑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘之斯。我一直安慰自己日杈,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開(kāi)白布佑刷。 她就那樣靜靜地躺著莉擒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瘫絮。 梳的紋絲不亂的頭發(fā)上涨冀,一...
    開(kāi)封第一講書人閱讀 49,046評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音麦萤,去河邊找鬼鹿鳖。 笑死,一個(gè)胖子當(dāng)著我的面吹牛壮莹,可吹牛的內(nèi)容都是我干的翅帜。 我是一名探鬼主播,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼垛孔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼藕甩!你這毒婦竟也來(lái)了施敢?” 一聲冷哼從身側(cè)響起周荐,我...
    開(kāi)封第一講書人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎僵娃,沒(méi)想到半個(gè)月后概作,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡默怨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年讯榕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡愚屁,死狀恐怖济竹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情霎槐,我是刑警寧澤送浊,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站丘跌,受9級(jí)特大地震影響袭景,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜闭树,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一耸棒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧报辱,春花似錦与殃、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至鸵赫,卻和暖如春衣屏,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辩棒。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工狼忱, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人一睁。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓钻弄,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親者吁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子窘俺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容