在iOS項(xiàng)目中使用WebP格式圖片

WebP是什么?

WebP(發(fā)音 weppy防症,來自:Google WebP)溅漾,是一種支持有損壓縮和無損壓縮的圖片文件格式懈费,派生自圖像編碼格式 VP8计露。根據(jù) Google 的測(cè)試,無損壓縮后的 WebP 比 PNG 文件少了 45% 的文件大小憎乙,即使這些 PNG 文件經(jīng)過其他壓縮工具壓縮之后票罐,WebP 還是可以減少 28% 的文件大小。在 Google 的明星產(chǎn)品如 Youtube泞边、Gmail该押、Google Play 中都可以看到 WebP 的身影,而 Chrome 網(wǎng)上商店甚至已完全使用了 WebP阵谚。國(guó)外公司如 Facebook蚕礼、ebay 和國(guó)內(nèi)公司如騰訊烟具、淘寶、美團(tuán)等也早已嘗鮮奠蹬。下面是QQ圖片格式對(duì)比圖

Snip20170803_18.png

iOS中如何使用WebP格式圖片?

很幸運(yùn),SDWebImage支持WebP格式圖片,可以講WebP數(shù)據(jù)–>NSData–>UIImage

There are 3 subspecs available now: Core, MapKit and WebP (this means you can install only some of the SDWebImage modules. By default, you get just Core, so if you need WebP, you need to specify it).Podfile example:$pod ‘SDWebImage/WebP’
摘自SDWebImage

PS:下載WebP這個(gè)庫(kù),由于是從Google下載的,如果下載失敗,請(qǐng)翻墻重試!!!
如果你是手動(dòng)添加WebP這個(gè)庫(kù)净赴,Xcode 需要如下配置 targets->build settings ->preprocessor Macros 填寫 SD_WEBP=1 如圖


Snip20170802_19.png

到此app 中支持 WebP圖片基本完成,但是重點(diǎn)來了,由于部分app使用到了UIWebview/WKWebview 這兩個(gè)控件是不支持WebP圖片的,目前有兩種方式可以讓其支持WebP格式圖片。

實(shí)現(xiàn)方式一 NSURLProtocol

對(duì)于NSURLProtocol的作用及使用以后找個(gè)時(shí)間再講了~~~~可以參考Apple 開發(fā)者文檔NSURLProtocol, UIWebView 直接就可以支持,但是WKWebView是不支持的,如何讓W(xué)KWebView也支持NSURLProtocol?不過WKWebView自定義NSURLProtocol會(huì)丟失boay數(shù)據(jù)罩润。文章結(jié)尾會(huì)附上Demo下載地址。

WKWebView 拓展支持NSURLProtocol 具體代碼如下

 FOUNDATION_STATIC_INLINE Class 
 ContextControllerClass() {
    static Class cls;
    if (!cls) {
        cls = [[[WKWebView new] valueForKey:@"browsingContextController"] class];
    }
    return cls;
}
FOUNDATION_STATIC_INLINE SEL RegisterSchemeSelector() {
    return NSSelectorFromString(@"registerSchemeForCustomProtocol:");
}
FOUNDATION_STATIC_INLINE SEL UnregisterSchemeSelector() {
    return NSSelectorFromString(@"unregisterSchemeForCustomProtocol:");
}
@implementation NSURLProtocol (WebKitExt)
+ (void)wk_registerScheme:(NSString *)scheme {
    Class cls = ContextControllerClass();
    SEL sel = RegisterSchemeSelector();
    if ([(id)cls respondsToSelector:sel]) {
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
        [(id)cls performSelector:sel withObject:scheme];
#pragma clang diagnostic pop
    }
}
+ (void)wk_unregisterScheme:(NSString *)scheme {
    Class cls = ContextControllerClass();
    SEL sel = UnregisterSchemeSelector();
    if ([(id)cls respondsToSelector:sel]) {
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
        [(id)cls performSelector:sel withObject:scheme];
#pragma clang diagnostic pop
    }
}

好了,現(xiàn)在UIWebView與WKWebView 都已經(jīng)支持自定義NSURLProtocol了;
我們創(chuàng)建一個(gè)類CLURLProtocol 繼承自NSURLProtocol
下面這幾個(gè)方法必須實(shí)現(xiàn)

+(BOOL)canInitWithRequest:(NSURLRequest )request;
+(NSURLRequest )canonicalRequestForRequest:(NSURLRequest *)request;
-(void)stopLoading;
-(void)startLoading;

到此為止UIWebView/WKWebView 均已支持加載webp格式圖片

優(yōu)點(diǎn):

適合所有網(wǎng)頁,可以不用修改網(wǎng)頁內(nèi)部html內(nèi)容翼馆。

缺點(diǎn):

NSURLProtocol 攔截App 的所有請(qǐng)求, 使用時(shí)需要根據(jù)個(gè)人項(xiàng)目情況而定, WKWebView 在post請(qǐng)求時(shí)會(huì)丟失boay, 目前解決方式為在WKWebView的 開始加載的 代理方法判斷是否為post,為post解除注冊(cè)自定義的NSURLProtocol,為GET請(qǐng)求時(shí)注冊(cè)自定義NSURLProtocol割以。

最后

本文Demo:【BAWKWebView-WebP
如有更多需求,請(qǐng)前往:【https://github.com/BAHome】

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末应媚,一起剝皮案震驚了整個(gè)濱河市严沥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌中姜,老刑警劉巖消玄,帶你破解...
    沈念sama閱讀 222,000評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異丢胚,居然都是意外死亡翩瓜,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門携龟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來兔跌,“玉大人,你說我怎么就攤上這事峡蟋》匚Γ” “怎么了?”我有些...
    開封第一講書人閱讀 168,561評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵蕊蝗,是天一觀的道長(zhǎng)仅乓。 經(jīng)常有香客問我,道長(zhǎng)蓬戚,這世上最難降的妖魔是什么夸楣? 我笑而不...
    開封第一講書人閱讀 59,782評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮子漩,結(jié)果婚禮上裕偿,老公的妹妹穿的比我還像新娘。我一直安慰自己痛单,他們只是感情好嘿棘,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,798評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著旭绒,像睡著了一般鸟妙。 火紅的嫁衣襯著肌膚如雪焦人。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,394評(píng)論 1 310
  • 那天重父,我揣著相機(jī)與錄音花椭,去河邊找鬼。 笑死房午,一個(gè)胖子當(dāng)著我的面吹牛矿辽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播郭厌,決...
    沈念sama閱讀 40,952評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼袋倔,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了折柠?” 一聲冷哼從身側(cè)響起宾娜,我...
    開封第一講書人閱讀 39,852評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎扇售,沒想到半個(gè)月后前塔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,409評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡承冰,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,483評(píng)論 3 341
  • 正文 我和宋清朗相戀三年华弓,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片困乒。...
    茶點(diǎn)故事閱讀 40,615評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡该抒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出顶燕,到底是詐尸還是另有隱情凑保,我是刑警寧澤,帶...
    沈念sama閱讀 36,303評(píng)論 5 350
  • 正文 年R本政府宣布涌攻,位于F島的核電站欧引,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏恳谎。R本人自食惡果不足惜芝此,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,979評(píng)論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望因痛。 院中可真熱鬧婚苹,春花似錦、人聲如沸鸵膏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽谭企。三九已至廓译,卻和暖如春评肆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背非区。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工瓜挽, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人征绸。 一個(gè)月前我還...
    沈念sama閱讀 49,041評(píng)論 3 377
  • 正文 我出身青樓久橙,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親管怠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子淆衷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,630評(píng)論 2 359

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