iOS PPT 轉(zhuǎn)圖片(UIImage)實現(xiàn)思路

公司最近提了個將 PPT 轉(zhuǎn)成圖片并顯示需求绩蜻,經(jīng)過各種查資料終于實現(xiàn),分享一下思路倦炒!

首先一個 UIView 對象要轉(zhuǎn)換成一張圖片获枝,我們可以使用如下代碼:

    UIGraphicsBeginImageContext(boundsSize); 
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

于是我想到了使用可以展示 ppt 文件的 UIWebView 來展示 ppt 文件:

    NSString* filePath = [[NSBundle mainBundle] pathForResource:@"iOS" ofType:@"pptx"];
    NSURL *fileUrl = [NSURL fileURLWithPath:filePath];
    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.frame];
    webView.scalesPageToFit = YES;
    webView.scrollView.minimumZoomScale = 0;
    webView.scrollView.maximumZoomScale = 1;
    webView.delegate = self;
    [self.view addSubview:webView];
    [webView loadRequest:[NSURLRequest requestWithURL:fileUrl]];

接下來就是將 UIWebView 的每一個 page 渲染成一張圖片并保存!
渲染思路如下:

  • 打印webview 的 html 闯割,并觀察html 文件的結(jié)構(gòu)
    // 打印 html 文件
    NSLog(@"%@", [webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"]);
    // html 結(jié)構(gòu)
    <div class="slide" style="position:absolute; overflow:hidden; top:0; left:0; width:959; height:540;">
    <div class="slide" style="position:absolute; overflow:hidden; top:1635; left:0; width:959; height:540;">
...
  • 觀察 html 文件我們發(fā)現(xiàn)每一頁 ppt 就是一個div class="slide"彻消,所以我們可以使用iOS 調(diào)用 js 代碼獲取到 ppt 的長寬,頂部位置以及 ppt 的總頁數(shù)等屬性
    NSUInteger pageCount = [[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByClassName('slide').length"] intValue];
    CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.getElementsByClassName('slide')[%li].style.height", _currentPage]] floatValue];
    CGFloat width= [[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.getElementsByClassName('slide')[%li].style.width", _currentPage]] floatValue];
    CGFloat offset = [[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.getElementsByClassName('slide')[%li].style.top", _currentPage]] floatValue];
  • 獲取到這些屬性后宙拉,我們可以設(shè)置webView的大小為 pdf 頁面的大小宾尚,webView 的 scrollView 的contentOffset,設(shè)置 webView 顯示的偏移谢澈。使用如下代碼為每一頁生成 UIImage
  webView.bounds = CGRectMake(0, 0, width, height);
  [webView.scrollView setContentOffset:CGPointMake(0, offset)];
  UIGraphicsBeginImageContext(boundsSize); 
  [view.layer renderInContext:UIGraphicsGetCurrentContext()];
  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();

以上可實現(xiàn) PPT 轉(zhuǎn)成圖片功能

然而經(jīng)壓力測試發(fā)現(xiàn)黑屏閃退

md央勒,內(nèi)存泄露!
通過 instrument 測試發(fā)現(xiàn) [view.layer renderInContext:UIGraphicsGetCurrentContext()];內(nèi)存一直不釋放澳化!oh my god崔步!
查資料得出的思路

    self.view.layer.contents = nil;

然而并沒有卵用
借鑒查找到的思路,最終我采取的策略是:每加載一次 webView 我只 render 一次缎谷, 移除掉 webView 然后再加載 webView 再 render

   [webview removeFromSuperview];
   webview = nil;
   NSString* filePath = [[NSBundle mainBundle] pathForResource:@"iOS" ofType:@"pptx"];
   NSURL *fileUrl = [NSURL fileURLWithPath:filePath];
   UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.frame];
   webView.scalesPageToFit = YES;
   webView.scrollView.minimumZoomScale = 0;
   webView.scrollView.maximumZoomScale = 1;
   webView.delegate = self;
   [self.view addSubview:webView];
   [webView loadRequest:[NSURLRequest requestWithURL:fileUrl]];

這種做法雖然效率很低但是閃退的問題解決了井濒!
當(dāng)然也可以將粒度調(diào)高一點,比如每加載一次 webView列林,render 5頁或者10頁瑞你,這個可以根據(jù)個人需求去優(yōu)化!

跪求Star
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末希痴,一起剝皮案震驚了整個濱河市者甲,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌砌创,老刑警劉巖虏缸,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異嫩实,居然都是意外死亡刽辙,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門甲献,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宰缤,“玉大人,你說我怎么就攤上這事】穑” “怎么了朦乏?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長氧骤。 經(jīng)常有香客問我呻疹,道長,這世上最難降的妖魔是什么语淘? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任诲宇,我火速辦了婚禮,結(jié)果婚禮上惶翻,老公的妹妹穿的比我還像新娘姑蓝。我一直安慰自己,他們只是感情好吕粗,可當(dāng)我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布纺荧。 她就那樣靜靜地躺著,像睡著了一般颅筋。 火紅的嫁衣襯著肌膚如雪宙暇。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天议泵,我揣著相機與錄音占贫,去河邊找鬼。 笑死先口,一個胖子當(dāng)著我的面吹牛型奥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播碉京,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼厢汹,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了谐宙?” 一聲冷哼從身側(cè)響起烫葬,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎凡蜻,沒想到半個月后搭综,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡咽瓷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年设凹,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茅姜。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出钻洒,到底是詐尸還是另有隱情奋姿,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布素标,位于F島的核電站称诗,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏头遭。R本人自食惡果不足惜寓免,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望计维。 院中可真熱鬧袜香,春花似錦、人聲如沸鲫惶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽欠母。三九已至欢策,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間赏淌,已是汗流浹背踩寇。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留六水,地道東北人俺孙。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像缩擂,于是被迫代替她去往敵國和親鼠冕。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,037評論 2 355

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,167評論 25 707
  • iOS開發(fā)系列--網(wǎng)絡(luò)開發(fā) 概覽 大部分應(yīng)用程序都或多或少會牽扯到網(wǎng)絡(luò)開發(fā)胯盯,例如說新浪微博懈费、微信等,這些應(yīng)用本身可...
    lichengjin閱讀 3,661評論 2 7
  • IOS之UIWebView的使用 剛接觸IOS開發(fā)1年多博脑,現(xiàn)在對于 混合式 移動端開發(fā)越來越流行憎乙,因為開發(fā)成本上、...
    學(xué)無止境666閱讀 45,790評論 5 53
  • 我為學(xué)書法而努力過 1.我為學(xué)書法而努力過叉趣,因為我的書法寫的不怎么樣泞边,然后我就很自覺的就去在家里跟著爺爺...
    郭晨萍閱讀 286評論 0 0
  • 愛吃饅頭作 這是一個久遠的故事,久遠到再聽說的人兒不知道它的真假...
    愛吃饅頭閱讀 197評論 6 5