Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

WKWebView 显示 HTML 中的 GIF 动图、WebP 无损图片,最简单、最方便的接入!

License

Notifications You must be signed in to change notification settings

BAHome/BAWKWebView-WebP

Open more actions menu

Repository files navigation

BAWKWebView-WebP

BAHome Team Name

1、功能及简介

  • 1、用分类封装 WKWebView,代码无任何侵入更改
  • 2、WKWebView 显示 HTML 中的 GIF 动图、WebP 无损图片,最简单、最方便的接入!
  • 3、什么是WebP?简单描述一下,WebP 是 google 创造出的一种图片格式,图片的压缩和解码都由 google 提供的 API 完成(各种语言都有,不过目前好像没看到 js 可以解码 WebP 的),在无损压缩的情况下,比 png 要小28%左右。 现在已经被各大浏览器厂商兼容(如:Chrome,Firefox等),不过苹果的 Safri 还没有完全兼容这种格式,所以如果 UIWebView 里面含有 WebP 的图片的话,就会显示不出来(但是我们可以通过 NSUrlProtocol 来做处理)。如果要在APP中使用得话,我们需要引入 SDWebImage 这个第三方库。
  • 4、WebP的劣势:压缩时间长,大概是png的8倍左右(不过一般都是在服务端压缩,客户端解码,所以服务端可以做个预压缩) 解码时间比png长,大概几十毫秒。WebP是节省了流量(图片小),增加了解码时间,换句话说就是:同样的图片,网络越快(图片更小的WebP就没有明显优势),图片越多(WebP要解码),WebP 比 png要慢。 UIWebView,WKWebView都不支持WebP。(UIWebView 可以用NSUrlProtocol来解决,但是WKWebView还没有太完美的办法,谁知道的请告诉我下) 不支持流式解压缩(即图片加载的时候会由模糊慢慢变清晰的过程,WebP貌似不支持这种解压缩方式)
  • 5、注意:因为图片的压缩和解码都由 google 提供的 API 完成,所以在使用的时候,记得开启 VPN 再更新 pod ,以免更新 pod 会失败!

2、图片示例

BAWKWebView-WebP1

3、安装、导入示例和源码地址

  • 1、文件夹拖入:下载 demo,把 BAWKWebView-WebP 文件夹拖入项目即可,另外需要 pod 导入 pod 'SDWebImage/WebP'
  • 2、导入头文件:
    #import "BAWKWebView_WebP.h"
  • 3、项目源码地址:
    OC 版 :https://github.com/BAHome/BAWKWebView-WebP
  • 5、注意:因为图片的压缩和解码都由 google 提供的 API 完成,所以在使用的时候,记得开启 VPN 再更新 pod ,以免更新 pod 会失败!

4、BAWKWebView-WebP 的类结构及 demo 示例

BAWKWebView-WebP

BAWKWebView_WebP.h

#ifndef BAWKWebView_WebP_h
#define BAWKWebView_WebP_h

//#import "BAURLSessionProtocol.h"
#import "NSURLProtocol+BAWebView.h"

/*!
 *********************************************************************************
 ************************************ 更新说明 ************************************
 *********************************************************************************
 
 欢迎使用 BAHome 系列开源代码 !
 如有更多需求,请前往:https://github.com/BAHome
 
 项目源码地址:
 OC 版 :https://github.com/BAHome/BAWKWebView_WebP
 
 最新更新时间:2017-08-02 【倒叙】<br>
 最新Version:【Version:1.0.0】<br>
 更新内容:<br>
 1.0.0.1、用分类封装 WKWebView,代码无任何侵入更改<br>
 1.0.0.2、WKWebView 目前可以兼容 GIF 动图显示,和 webp 的静态图片显示(webp 的动态图片显示需要等待后期版本更新)<br>
 */

#endif /* BAWKWebView_WebP_h */

NSURLProtocol+BAWebView.h

/****
 NSURLProtocol, UIWebView 直接就可以支持,但是 WKWebView 是不支持的,如何让 WKWebView 也支持 NSURLProtocol
 **/
#import <Foundation/Foundation.h>

@interface NSURLProtocol (BAWebView)

/**
 NSURLProtocol:registerScheme

 @param scheme 【http/https】
 */
+ (void)ba_web_registerScheme:(NSString*)scheme;

/**
 NSURLProtocol:webView销毁的时候注销Scheme

 @param scheme 【http/https】
 */
+ (void)ba_web_unregisterScheme:(NSString*)scheme;

@end

demo 示例

// 示例1:
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    [self.view setBackgroundColor:[UIColor whiteColor]];
    [self ba_registerURLProtocol];
    [self.view addSubview:self.wkWebview];
    [self.wkWebview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:self.urlString]]];
}

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    self.wkWebview.frame = CGRectMake(0, 0, BAKit_SCREEN_WIDTH, BAKit_SCREEN_HEIGHT);
}

#pragma mark - 注册自定义 NSURLProtocol
- (void)ba_registerURLProtocol
{
    [NSURLProtocol registerClass:NSClassFromString(@"BAURLSessionProtocol")];
    // 注册registerScheme使得WKWebView支持NSURLProtocol
    [NSURLProtocol ba_web_registerScheme:@"http"];
    [NSURLProtocol ba_web_registerScheme:@"https"];
}

- (void)dealloc
{
    [NSURLProtocol unregisterClass:NSClassFromString(@"BAURLSessionProtocol")];
    // 移除 registerScheme
    [NSURLProtocol ba_web_unregisterScheme:@"http"];
    [NSURLProtocol ba_web_unregisterScheme:@"https"];
}

- (WKWebView *)wkWebview
{
    if (!_wkWebview)
    {
        _wkWebview = [[WKWebView alloc]initWithFrame:CGRectZero];
    }
    return _wkWebview;
}

其他示例可下载 demo 查看源码!

5、更新记录:【倒叙】

欢迎使用 【BAHome】 系列开源代码 ! 如有更多需求,请前往:【https://github.com/BAHome】

最新更新时间:2017-08-02 【倒叙】
最新Version:【Version:1.0.0】
更新内容:
1.0.0.1、用分类封装 WKWebView,代码无任何侵入更改
1.0.0.2、WKWebView 目前可以兼容 GIF 动图显示,和 webp 的静态图片显示(webp 的动态图片显示需要等待后期版本更新)

6、bug 反馈

1、开发中遇到 bug,希望小伙伴儿们能够及时反馈与我们 BAHome 团队,我们必定会认真对待每一个问题!

2、以后提需求和 bug 的同学,记得把 git 或者博客链接给我们,我直接超链到你们那里!希望大家积极参与测试!

7、BAHome 团队成员

1、QQ 群 479663605
【注意:此群为 2 元 付费群,介意的小伙伴儿勿扰!】

孙博岩
QQ:137361770
git:https://github.com/boai
简书:http://www.jianshu.com/u/95c9800fdf47
微博:

马景丽
QQ:1253540493
git:https://github.com/MaJingli

陆晓峰
QQ:442171865
git:https://github.com/zeR0Lu

陈集
QQ:3161182978
git:https://github.com/chenjipdc
简书:http://www.jianshu.com/u/90ae559fc21d

任子丰
QQ:459643690
git:https://github.com/renzifeng

吴丰收
QQ:498121294

石少庸
QQ:363605775
git:https://github.com/CrazyCoderShi
简书:http://www.jianshu.com/u/0726f4d689a3

唐海洋
QQ:790015339
git:https://github.com/tanghaiyang1992
简书:http://www.jianshu.com/u/b833cfd6bd58

8、开发环境 和 支持版本

开发使用 最新版本 Xcode,理论上支持 iOS 8 及以上版本,如有版本适配问题,请及时反馈!多谢合作!

9、感谢

感谢 BAHome 团队成员倾力合作,后期会推出一系列 常用 UI 控件的封装,大家有需求得也可以在 issue 提出,如果合理,我们会尽快推出新版本!

BAHome 的发展离不开小伙伴儿的信任与推广,再次感谢各位小伙伴儿的支持!

About

WKWebView 显示 HTML 中的 GIF 动图、WebP 无损图片,最简单、最方便的接入!

Resources

License

Stars

Watchers

Forks

Packages

No packages published
Morty Proxy This is a proxified and sanitized view of the page, visit original site.