当前位置:   article > 正文

Android WebView使用和处理打开相机拍照回收_android webvie拍照返回

android webvie拍照返回

本篇文章介绍了常用的WebView使用,和处理了回收问题,如有问题,请留言斧正。

概述

WebView是android开发中必不可少的组件,目前环境下混合开发日新月异,相对我们开发者来说,必须要掌握相关的WebView使用技巧和常见问题。

WebView简介

WebView用来展示网页内容,WebView在4.4之前基于webkit引擎,从Android 4.4(KitKat)开始,原本基于WebKit的WebView开始基于Chromium内核,这一改动大大提升了WebView组件的性能以及对HTML5,CSS3,JavaScript的支持。不过它的API却没有很大的改动,在兼容低版本的同时只引进了少部分新的API,并不需要你做很大的改动。WebView的属性有很多,不过已经封装在几个三个大类中,并且webview本身也有很多属性可以提供使用,通常是getUrl、reload等。常用到的三个配置类是:WebSettings、WebChromeClient、WebViewClient。WebView的属性我就不介绍了,大家可以看看源码。

WebSettings
WebSettings是用来管理WebView配置的类。当WebView第一次创建时,内部会包含一个默认配置的集合。若我们想更改这些配置,便可以通过WebSettings里的方法来进行设置。
WebSettings对象可以通过WebView.getSettings()获得,它的生命周期是与它的WebView本身息息相关的,如果WebView被销毁了,那么任何由WebSettings调用的方法也同样不能使用。

WebSettings settings = web.getSettings();
// 存储(storage)
// 启用HTML5 DOM storage API,默认值 false
settings.setDomStorageEnabled(true); 
// 启用Web SQL Database API,这个设置会影响同一进程内的所有WebView,默认值 false
// 此API已不推荐使用
settings.setDatabaseEnabled(true);  
// 启用Application Caches API,必需设置有效的缓存路径才能生效,默认值 false
settings.setAppCacheEnabled(true); 
settings.setAppCachePath(context.getCacheDir().getAbsolutePath());
// 定位(location)
settings.setGeolocationEnabled(true);
// 是否保存表单数据
settings.setSaveFormData(true);
// 是否当webview调用requestFocus时为页面的某个元素设置焦点,默认值 true
settings.setNeedInitialFocus(true);  
// 是否支持viewport属性,默认值 false
// 页面通过`<meta name="viewport" ... />`自适应手机屏幕
settings.setUseWideViewPort(true);
// 是否使用overview mode加载页面,默认值 false
// 当页面宽度大于WebView宽度时,缩小使页面宽度等于WebView宽度
settings.setLoadWithOverviewMode(true);
// 布局算法
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
// 是否支持Javascript,默认值false
settings.setJavaScriptEnabled(true); 
// 是否支持多窗口,默认值false
settings.setSupportMultipleWindows(false);
// 是否可用Javascript(window.open)打开窗口,默认值 false
settings.setJavaScriptCanOpenWindowsAutomatically(false);
// 资源访问
settings.setAllowContentAccess(true); // 是否可访问Content Provider的资源,默认值 true
settings.setAllowFileAccess(true);    // 是否可访问本地文件,默认值 true
// 是否允许通过file url加载的Javascript读取本地文件,默认值 false
settings.setAllowFileAccessFromFileURLs(false);  
// 是否允许通过file url加载的Javascript读取全部资源(包括文件,http,https),默认值 false
settings.setAllowUniversalAccessFromFileURLs(false);
// 资源加载
settings.setLoadsImagesAutomatically(true); // 是否自动加载图片
settings.setBlockNetworkImage(false);       // 禁止加载网络图片
settings.setBlockNetworkLoads(false);       // 禁止加载所有网络资源
// 缩放(zoom)
settings.setSupportZoom(true);          // 是否支持缩放
settings.setBuiltInZoomControls(false); // 是否使用内置缩放机制
settings.setDisplayZoomControls(true);  // 是否显示内置缩放控件
// 默认文本编码,默认值 "UTF-8"
settings.setDefaultTextEncodingName("UTF-8");
settings.setDefaultFontSize(16);        // 默认文字尺寸,默认值16,取值范围1-72
settings.setDefaultFixedFontSize(16);   // 默认等宽字体尺寸,默认值16
settings.setMinimumFontSize(8);         // 最小文字尺寸,默认值 8
settings.setMinimumLogicalFontSize(8);  // 最小文字逻辑尺寸,默认值 8
settings.setTextZoom(100);              // 文字缩放百分比,默认值 100
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

WebChromeClient
从名字上不难理解,这个类就像WebView的委托人一样,是帮助WebView处理各种通知和请求事件

// 获得所有访问历史项目的列表,用于链接着色。
public void getVisitedHistory(ValueCallback<String[]> callback) {
}
// <video /> 控件在未播放时,会展示为一张海报图,HTML中可通过它的'poster'属性来指定。
public Bitmap getDefaultVideoPoster() {
    return null;
}
public View getVideoLoadingProgressView() {
    return null;
}
// 接收当前页面的加载进度
public void onProgressChanged(WebView view, int newProgress) {
}
// 接收文档标题
public void onReceivedTitle(WebView view, String title) {
}
// 接收图标(favicon)
public void onReceivedIcon(WebView view, Bitmap icon) {
}
public void onReceivedTouchIconUrl(WebView view, String url, boolean precomposed) {
}
// 通知应用当前页进入了全屏模式,此时应用必须显示一个包含网页内容的自定义View
public void onShowCustomView(View view, CustomViewCallback callback) {
}
// 通知应用当前页退出了全屏模式,此时应用必须隐藏之前显示的自定义View
public void onHideCustomView() {
}
// 显示一个alert对话框
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    return false;
}
// 显示一个confirm对话框
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
    return false;
}
// 显示一个prompt对话框
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    return false;
}
// 显示一个对话框让用户选择是否离开当前页面
public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result) {
    return false;
}
// 指定源的网页内容在没有设置权限状态下尝试使用地理位置API。
// 从API24开始,此方法只为安全的源(https)调用,非安全的源会被自动拒绝
public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
}
// 当前一个调用 onGeolocationPermissionsShowPrompt() 取消时,隐藏相关的UI。
public void onGeolocationPermissionsHidePrompt() {
}
// 通知应用打开新窗口
public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
    return false;
}
// 通知应用关闭窗口
public void onCloseWindow(WebView window) {
}
// 请求获取取焦点
public void onRequestFocus(WebView view) {
}
// 通知应用网页内容申请访问指定资源的权限(该权限未被授权或拒绝)
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequest(PermissionRequest request) {
    request.deny();
}
// 通知应用权限的申请被取消,隐藏相关的UI。
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequestCanceled(PermissionRequest request) {
}
// 为'<input type="file" />'显示文件选择器,返回false使用默认处理
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
    return false;
}
// 接收JavaScript控制台消息
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
    return false;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78

WebViewClient

// 拦截页面加载,返回true表示宿主app拦截并处理了该url,否则返回false由当前WebView处理
// 此方法在API24被废弃,不处理POST请求,这里有的人会介绍说返回true,这种说法是错误的,看这个方法的注释就知道,如果返
//true,是为了让app自己离开webview来处理,比如我们可以在这里面处理电话号(tel:),默认返回false
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    return false;
}
// 拦截页面加载,返回true表示宿主app拦截并处理了该url,否则返回false由当前WebView处理
// 此方法添加于API24,不处理POST请求,可拦截处理子frame的非http请求
@TargetApi(Build.VERSION_CODES.N)
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    return shouldOverrideUrlLoading(view, request.getUrl().toString());
}
// 此方法废弃于API21,调用于非UI线程
// 拦截资源请求并返回响应数据,返回null时WebView将继续加载资源
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
    return null;
}
// 此方法添加于API21,调用于非UI线程
// 拦截资源请求并返回数据,返回null时WebView将继续加载资源
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
    return shouldInterceptRequest(view, request.getUrl().toString());
}
// 页面(url)开始加载
public void onPageStarted(WebView view, String url, Bitmap favicon) {
}
// 页面(url)完成加载
public void onPageFinished(WebView view, String url) {
}
// 将要加载资源(url)
public void onLoadResource(WebView view, String url) {
}
// 这个回调添加于API23,仅用于主框架的导航
// 通知应用导航到之前页面时,其遗留的WebView内容将不再被绘制。
// 这个回调可以用来决定哪些WebView可见内容能被安全地回收,以确保不显示陈旧的内容
// 它最早被调用,以此保证WebView.onDraw不会绘制任何之前页面的内容,随后绘制背景色或需要加载的新内容。
// 当HTTP响应body已经开始加载并体现在DOM上将在随后的绘制中可见时,这个方法会被调用。
// 这个回调发生在文档加载的早期,因此它的资源(css,和图像)可能不可用。
// 如果需要更细粒度的视图更新,查看 postVisualStateCallback(long, WebView.VisualStateCallback).
// 请注意这上边的所有条件也支持 postVisualStateCallback(long ,WebView.VisualStateCallback)
public void onPageCommitVisible(WebView view, String url) {
}
// 此方法废弃于API23
// 主框架加载资源时出错
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
}
// 此方法添加于API23
// 加载资源时出错,通常意味着连接不到服务器
// 由于所有资源加载错误都会调用此方法,所以此方法应尽量逻辑简单
@TargetApi(Build.VERSION_CODES.M)
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
    if (request.isForMainFrame()) {
        onReceivedError(view, error.getErrorCode(), error.getDescription().toString(), request.getUrl().toString());
    }
}
// 此方法添加于API23
// 在加载资源(iframe,image,js,css,ajax...)时收到了 HTTP 错误(状态码>=400)
public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
}
// 是否重新提交表单,默认不重发
public void onFormResubmission(WebView view, Message dontResend, Message resend) {
    dontResend.sendToTarget();
}
// 通知应用可以将当前的url存储在数据库中,意味着当前的访问url已经生效并被记录在内核当中。
// 此方法在网页加载过程中只会被调用一次,网页前进后退并不会回调这个函数。
public void doUpdateVisitedHistory(WebView view, String url, boolean isReload) {
}
// 加载资源时发生了一个SSL错误,应用必需响应(继续请求或取消请求)
// 处理决策可能被缓存用于后续的请求,默认行为是取消请求
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
    handler.cancel();
}
// 此方法添加于API21,在UI线程被调用
// 处理SSL客户端证书请求,必要的话可显示一个UI来提供KEY。
// 有三种响应方式:proceed()/cancel()/ignore(),默认行为是取消请求
// 如果调用proceed()或cancel(),Webview 将在内存中保存响应结果且对相同的"host:port"不会再次调用 onReceivedClientCertRequest
// 多数情况下,可通过KeyChain.choosePrivateKeyAlias启动一个Activity供用户选择合适的私钥
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onReceivedClientCertRequest(WebView view, ClientCertRequest request) {
    request.cancel();
}
// 处理HTTP认证请求,默认行为是取消请求
public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) {
    handler.cancel();
}
// 通知应用有个已授权账号自动登陆了
public void onReceivedLoginRequest(WebView view, String realm, String account, String args) {
}
// 给应用一个机会处理按键事件
// 如果返回true,WebView不处理该事件,否则WebView会一直处理,默认返回false
public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) {
    return false;
}
// 处理未被WebView消费的按键事件
// WebView总是消费按键事件,除非是系统按键或shouldOverrideKeyEvent返回true
// 此方法在按键事件分派时被异步调用
public void onUnhandledKeyEvent(WebView view, KeyEvent event) {
    super.onUnhandledKeyEvent(view, event);
}
// 通知应用页面缩放系数变化
public void onScaleChanged(WebView view, float oldScale, float newScale) {
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102

这些方法的发生顺序发生在webview加载过程中:

shouldOverrideUrlLoading
onProgressChanged[...]
shouldInterceptRequest 
onProgressChanged[...]
onPageStarted
onProgressChanged[...]
onLoadResource 
onProgressChanged[...]
onReceivedTitle/onPageCommitVisible 
onProgressChanged[100]
onPageFinished
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

JavaScript和WebView交互

WebView调用网页上的JavaScript代码
在WebView中调用JS基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”);
这种是调用JS的无返回值的方法,WebView也可以调用JS有返回值的方法,当然前提是在4.4之上的版本才支持,通过evaluateJavaScript方法,传入JS方法和方法返回类型的回调。
举例说明,下面是JS的方法

function readyToGo() {
      alert("Hello")
  }

  function alertMessage(message) {
      alert(message)
  }

  function getYourCar(){
      return "Car";
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

WebView调用JavaScript无参无返回值函数

String call = "javascript:readyToGo()";
webView.loadUrl(call);
  • 1
  • 2

WebView调用JavScript有参无返回值函数

String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);
  • 1
  • 2

WebView调用JavaScript有参数有返回值的函数

@TargetApi(Build.VERSION_CODES.KITKAT)
private void evaluateJavaScript(WebView webView){
    webView.evaluateJavascript("getYourCar()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            Log.d("findCar",s);
        }
    });
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

JavaScript通过WebView调用Java代码
从API19开始,Android提供了@JavascriptInterface对象注解的方式来建立起Javascript对象和Android原生对象的绑定,提供给JavScript调用的函数必须带有@JavascriptInterface。
1.先设置启用JS支持

//是否支持Javascript,默认值false
settings.setJavaScriptEnabled(true);
  • 1
  • 2

2.注入对象到Javascript

public class JSObject {
    @JavascriptInterface
    public void say(String words) {
      // todo
    }
}
// 注入对象'jsobj',在网页中通过`jsobj.say(...)`调用,网页端直接可以拿到'jsobj'这个对象。
web.addJavascriptInterface(new JSObject(), "jsobj")
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3.JS使用

window.jsobj.say(...)
  • 1

这里JS也可以调用android的有返回值的方法
定义一个带返回值的Java方法,并使用@JavaInterface

@JavaInterface
public String getMessage(){
    return "Hello,boy~";
}
  • 1
  • 2
  • 3
  • 4

JS方法可以直接通过对象调用

function showHello(){
    var str=window.jsobj.getMessage();
    console.log(str);
}
  • 1
  • 2
  • 3
  • 4

WebView加载优化

此处参考别人的,自己没有尝试,因为在开发中的项目暂时没有用到。但是和我的想法不谋而合

当WebView的使用频率变得频繁的时候,对于其各方面的优化就变得逐渐重要了起来。可以知道的是,我们每加载一个 H5页面,都会有很多的请求。除了HTML主URL自身的请求外,HTML外部引用的 JS、CSS、字体文件、图片都是一个个独立的HTTP 请求,虽然请求是并发的,但当网页整体数量达到一定程度的时候,再加上浏览器解析、渲染的时间,Web整体的加载时间变得很长。同时请求文件越多,消耗的流量也会越多。那么对于加载的优化就变得非常重要,这方面的经验我也没有什么别的,大概三个方面:
一个,就是资源本地化的问题
首先可以明确的是,以目前的网络条件,通过网络去服务器获取资源的速度是远远比不上从本地读取的。谈论各种优化策略其实恰恰忽略了“需要加载”才是阻挡速度提升的最大绊脚石。所以我们的思路一,就是将一些较重的资源比如js、css、图片甚至HTML本身进行本地化处理,在每次加载到这些资源的时候,从本地读取进行加载,可以简单记忆为“存·取·更”。
1.“存”——将上述重量级资源打包进apk文件,每次加载相应文件时时从本地取即可。也可不打包,在第一次加载时以及接下来的若干间隔时间里动态下载存储,将所有的资源文件都存在Android的asset目录下;
2.“取”——重写WebViewClient的WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)方法,通过一定的判别方法(例如正则表达式)拦截相应的请求,从本地读取相应资源并返回;
3.“更”——建立起Cache Control机制,定期或使用API通知的形式控制本地资源的更新,保证本地资源是最新和可用的。
第二个,就是缓存的问题
倘若你不采用或不完全采用第一条资源本地化的思路,那么你的WebView缓存是必须要开启的(虽然这一思路和第一条有重合的地方)。
WebSettings settings = webView.getSettings();
settings.setAppCacheEnabled(true);
settings.setDatabaseEnabled(true);
settings.setDomStorageEnabled(true);//开启DOM缓存
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
在网络正常时,采用默认缓存策略,在缓存可获取并且没有过期的情况下加载缓存,否则通过网络获取资源以减少页面的网络请求次数。
这里值得提起的是,我们经常在app里用WebView展示页面时,并不想让用户觉得他是在访问一个网页。因为倘若我们的app里网页非常多,而我们给用户的感觉又都像在访问网页的话,我们的app便失去了意义。(我的意思是为什么用户不直接使用浏览器呢?)
所以这时,离线缓存的问题就值得我们注意。我们需要让用户在没有网的时候,依然能够操作我们的app,而不是面对一个和浏览器里的网络错误一样的页面,哪怕他能进行的操作十分有限。
这里我的思路是,在开启缓存的前提下,WebView在加载页面时检测网络变化,倘若在加载页面时用户的网络突然断掉,我们应当更改WebView的缓存策略。
ConnectivityManager connectivityManager = (ConnectivityManager)getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo networkInfo = connectivityManager.getActiveNetworkInfo();
if(networkInfo.isAvailable()) {
settings.setCacheMode(WebSettings.LOAD_DEFAULT);//网络正常时使用默认缓存策略
} else {
settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);//网络不可用时只使用缓存
}
既然有缓存,就要有缓存控制,与一相似的是我们也要建立缓存控制机制,定期或接受服务器通知来进行缓存的清空或更新。
第三个,就是延迟加载和执行js
在WebView中,onPageFinished()的回调意味着页面加载的完成。但该方法会在JavScript脚本执行完成后才会触发,倘若我们要加载的页面使用了JQuery,会在处理完DOM对象,执行完$(document).ready(function() {})后才会渲染并显示页面。这是不可接受的,所以我们需要对Js进行延迟加载,当然这部分是Web前端的工作。

处理打开相机拍照回收

先放两张效果图
这里写图片描述
这里写图片描述
使用了WebView并且其中要打开原生相机拍照和打开图库选择图片,在内存较低的手机上测试必定会出现回收,测试手机小米三,当内存不足的时候,从webview界面打开拍照后,只要返回后就会回收当前的WebView界面。我自己的手机nexus6p倒是没有出现回收,让我很尴尬。后来拿了一部青橙的手机测试后,我感觉要死啦。它的现象是必定回收~~~
至于拍照回收页面,大概是有的手机限定了内存使用,打开拍照后就会收回。
其中我的项目分为打开拍照和打开图库,对于打开图库,我采用自定义的图库,没有出现回收。
至于相机,我刚开始采用了google的cameraView相机唉,发现还是会回收。最后只有通过解决回收问题了。
我的思路:
调用拍照的时候可以传入图片路径给相机,那么我只要在回收的时候保存这个路径并且判断是否拍照了照片,然后吧图片转成base64字符串,然后在WebViewClient中的onPageStarted方法中判断是否回收,然后压缩图片,再然后就是吧字符串通过调用H5的方法有参构造方法传给H5。后来发现这里有个问题,我的压缩是耗时操作,那么H5那端需要启用一个延迟获取值(H5的timeout方法延迟500毫秒即可)
这是异常的应该执行的操作,那么正常的就是,点击input标签,并且input标签设置accept类型,点击这种文件操作会调用WebChromeClient的onShowFileChooser方法;
1.判断是否有上次的图片,进行删除;
2.过滤input的类型,判断是否打开相机和图库;
3.打开图库或者相机,并且返回true(返回true,表示app会处理)保存filePathCallback对象(调用它的onReceiveValue(xx)方法,这样的话H5那边就可以接到到返回的uri了)
4.在onActivityResult()方法中获取拍照后的数据,并且包装成uri[]数组。并且使用filePathCallback回调。
这是一次正常的流程。

接下来就是重中之重了,撸代码
回收相关的字段设置

 /**
     * 判断此页面是否被回收
     */
    private boolean isRecycler;
    /**
     * 用来给H5调用的
     */
    private boolean isH5Recycler;
    /**
     * 用来给H5调用:判断当前的type是哪种(eg:家访、核账)
     */
    private String H5ActionType;
    /**
     * 用来保存得到的一维码,防止界面回收;界面回收后要将其保存
     */
    private String mOneCode;
    /**
     * 用来给H5调用的,在页面被回收的时候要保存
     */
    private String H5FileList;
    /**
     * 用来给H5调用的,在页面被回收的时候要保存,帮它保存家访action中填写的内容
     */
    private String H5VisitEditData;
    /**
     * 用来给H5调用的,在页面被回收的时候要保存,帮它保存核账action中填写的内容
     */
    private String H5CallAccountEditData;
 @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putString("photo_path", mCurrentPhotoPath);
        outState.putParcelable("uri", photoURI);
        outState.putString("h5_file_list", H5FileList);
        outState.putString("H5VisitEditData",H5VisitEditData);
        outState.putString("H5CallAccountEditData",H5CallAccountEditData);
        outState.putString("mOneCode", mOneCode);
        outState.putString("H5ActionType",H5ActionType);
    }
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (savedInstanceState != null) {
            isRecycler = true;
            isH5Recycler = true;
            H5ActionType = savedInstanceState.getString("H5ActionType");
            mCurrentPhotoPath = savedInstanceState.getString("photo_path");
            photoURI = savedInstanceState.getParcelable("uri");
            H5FileList = savedInstanceState.getString("h5_file_list");
            H5VisitEditData = savedInstanceState.getString("H5VisitEditData");
            H5CallAccountEditData = savedInstanceState.getString("H5CallAccountEditData");
            mOneCode = savedInstanceState.getString("mOneCode");
        }
   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

WebView的设置,先在pagestart中判断是否回收

mWebView.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.startsWith("tel:")) {
                    Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse(url));
                    startActivity(intent);
                    return true;
                }
                return super.shouldOverrideUrlLoading(view, url);
            }
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                if (isRecycler) {
                    openStorage();
                }
            }

        });
 mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                //当正常的拍照流程没有问题的话,那么如果拍完照片的话并且给H5,那么的话手机端不知道什么时候要删除图片
                //为了防止图片过多,那么在点击input标签的时候就删除上一个图片地址
                deleteImageFile();
                String[] chooserParams = fileChooserParams.getAcceptTypes();
                Logger.d(Arrays.toString(chooserParams));
                List<String> list = Arrays.asList(chooserParams);
                if (list.contains(imageExtension)) {
                    openCamera();
                } else if (list.contains(galleryExtension)) {
                    //采用图库并不使用系统自带的
                    PhotoPicker.builder()
                            .setPhotoCount(1)
                            .setShowCamera(false)
                            .setShowGif(false)
                            .setPreviewEnabled(false)
                            .start(WebDetailActivity.this, PhotoPicker.REQUEST_CODE);
                } else {
                    return super.onShowFileChooser(webView, filePathCallback, fileChooserParams);
                }
                mValueCallback = filePathCallback;
                return true;
            }
        });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

接下来是打相机拍完照片,后返回就应该到onActivityResult()方法了。

@Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        //保存一些值用来回收判断
        mRequestCode = requestCode;
        mResultCode = resultCode;
        mGalleryIntent = data;
        if (resultCode == Activity.RESULT_CANCELED && requestCode == REQUEST_GALLERY && mValueCallback != null) {
            //如果相册没有选择或者直接返回需要给callback设置,不设置的话onShowFileChooser方法不会调用
            mValueCallback.onReceiveValue(null);
            mValueCallback = null;
        }
        if (requestCode == REQUEST_CAMERA) {
            //打开拍照后并没有选择或者直接返回的话,需要把当前传入给相机应用的图片文件删除
            if (resultCode == Activity.RESULT_CANCELED) {
                deleteImageFile();
                if (!CommUtil.checkIsNull(mValueCallback)) {
                    //如果相机没有选择或者直接返回需要给callback设置,不设置的话onShowFileChooser方法不会调用
                    mValueCallback.onReceiveValue(null);
                    mValueCallback = null;
                }
            } else if (resultCode == Activity.RESULT_OK) {
                //TODO 下一步应该压缩图片
                if (mValueCallback != null) {
                    Uri[] results = null;
                    results = new Uri[]{photoURI};
                    mValueCallback.onReceiveValue(results);
                    mValueCallback = null;
                }
            }
        }
        //里是正常的打开图库返回后
        if (requestCode == PhotoPicker.REQUEST_CODE) {
            if (resultCode == RESULT_OK) {
                if (data != null) {
                    ArrayList<String> photos = data.getStringArrayListExtra(PhotoPicker.KEY_SELECTED_PHOTOS);
                    Logger.d(photos.get(0));
                    File file = new File(photos.get(0));
                    Observable.just(file)
                            .map(new Func1<File, Uri>() {
                                @Override
                                public Uri call(File file) {
                                    return getImageContentUri(WebDetailActivity.this, file);
                                }
                            })
                            .subscribeOn(Schedulers.io())
                            .observeOn(AndroidSchedulers.mainThread())
                            .subscribe(new Action1<Uri>() {
                                @Override
                                public void call(Uri uri) {
                                    if (!CommUtil.checkIsNull(uri)) {
                                        Uri[] results = new Uri[]{uri};
                                        mValueCallback.onReceiveValue(results);
                                        mValueCallback = null;
                                    } else {
                                        mValueCallback.onReceiveValue(null);
                                        mValueCallback = null;
                                    }
                                }
                            });
                } else {
                    ToastUtils.showShort(R.string.data_unusual);
                    mValueCallback.onReceiveValue(null);
                    mValueCallback = null;
                }
            } else {
                mValueCallback.onReceiveValue(null);
                mValueCallback = null;
            }
        }
    }
 /**
     * 绝对路径转uri
     *
     * @param context
     * @param imageFile
     * @return content Uri
     */
    public static Uri getImageContentUri(Context context, java.io.File imageFile) {
        String filePath = imageFile.getAbsolutePath();
        Cursor cursor = context.getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
                new String[]{MediaStore.Images.Media._ID}, MediaStore.Images.Media.DATA + "=? ",
                new String[]{filePath}, null);
        if (cursor != null && cursor.moveToFirst()) {
            int id = cursor.getInt(cursor.getColumnIndex(MediaStore.MediaColumns._ID));
            Uri baseUri = Uri.parse("content://media/external/images/media");
            return Uri.withAppendedPath(baseUri, "" + id);
        } else {
            if (imageFile.exists()) {
                ContentValues values = new ContentValues();
                values.put(MediaStore.Images.Media.DATA, filePath);
                return context.getContentResolver().insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, values);
            } else {
                return null;
            }
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97

那么这些方法都准备好了,下一步是打开图片,代码上面有一个方法是打开相机的方法,下面也写出来

/**
     * 先判断是否有相机模块
     */
    private void openCamera() {
        boolean hasSystemFeature = getPackageManager().hasSystemFeature(PackageManager.FEATURE_CAMERA);
        if (hasSystemFeature) {
            Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
            if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
                File photoFile = null;
                try {
                    photoFile = createImageFile();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                if (photoFile != null) {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
                        photoURI = FileProvider.getUriForFile(this, "com.cango.adpickcar.fileprovider", photoFile);

                    } else {
                        photoURI = Uri.fromFile(photoFile);
                    }
                    takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, photoURI);
                    startActivityForResult(takePictureIntent, REQUEST_CAMERA);
                }
            }
        }
    }
/**
     * 创建一个图片文件
     *
     * @return
     * @throws IOException
     */
    private File createImageFile() throws IOException {
        String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
        String imageFileName = "JPEG_" + timeStamp + "_";
        File storageDir = getExternalFilesDir(Environment.DIRECTORY_PICTURES);
        File image = File.createTempFile(
                imageFileName,  /* prefix */
                ".jpg",         /* suffix */
                storageDir      /* directory */
        );
        mCurrentPhotoPath = image.getAbsolutePath();
        return image;
    }

    /**
     * 删除当前的图片文件
     *
     * @return
     */
    private boolean deleteImageFile() {
        if (mCurrentPhotoPath != null) {
            File emptyFile = new File(mCurrentPhotoPath);
            if (emptyFile.exists())
                return emptyFile.delete();
        }
        return false;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

接下来如果正常的走通流程就没有问题,那么如果不正常呢,就是被回收呢,因为之前已经将回收要保存的属性已经在回收中保存了,那么我就在onpagestart中判断是否回收,然后将回收后产生的图片转成base64通过js方法给H5就可以了。

  @Override
            public void onPageFinished(WebView view, String url) {
                loadDia.dismiss();
                if (isRecycler) {
                    openStorage();
                }
                super.onPageFinished(view, url);
            }
 @AfterPermissionGranted(REQUEST_STORAGE_GROUP)
    private void openStorage() {
        String[] perms = {Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.WRITE_EXTERNAL_STORAGE};
        if (EasyPermissions.hasPermissions(this, perms)) {
            if (isRecycler) {
                isRecycler = false;
                recycler();
            }
        } else {
            EasyPermissions.requestPermissions(this, getString(R.string.location_group_and_storage),
                    REQUEST_STORAGE_GROUP, perms);
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

上面的代码就是判断是否回收会走recycler()

/**
     * 假如被回收要做的事情
     */
    private void recycler() {
        isRecycler = false;
        switch (mRequestCode) {
            case REQUEST_CAMERA:
                if (mResultCode == Activity.RESULT_OK) {
                    if (mWebView != null) {
                        Logger.d(mCurrentPhotoPath);
                        Observable
                                .just(mCurrentPhotoPath)
                                .map(new Func1<String, String>() {
                                    @Override
                                    public String call(String s) {
                                    //把bitmap压缩了
                                        return bitmapToString(s);
                                    }
                                })
                                .subscribeOn(Schedulers.io())
                                .observeOn(AndroidSchedulers.mainThread())
                                .subscribe(new Action1<String>() {
                                    @Override
                                    public void call(String s) {
                                    //调用js方法把base64的字符串给H5
                                        String call = "javascript:recyclerPhoto(\"" + s + "\")";
                                        mWebView.loadUrl(call);
                                    }
                                });
                    }
                } else if (mResultCode == Activity.RESULT_CANCELED) {
                    deleteImageFile();
                } else {

                }
                break;
        }
    }
//把bitmap转换成String
    public static String bitmapToString(String filePath) {
        Bitmap bm = getSmallBitmap(filePath);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();

        //1.5M的压缩后在100Kb以内,测试得值,压缩后的大小=94486字节,压缩后的大小=74473字节
        //这里的JPEG 如果换成PNG,那么压缩的就有600kB这样
        bm.compress(Bitmap.CompressFormat.JPEG, 40, baos);
        byte[] b = baos.toByteArray();
        return Base64.encodeToString(b, Base64.DEFAULT);
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

接下来就是JS那边在初始的时候要判断是否回收,判断当前类型(用来跳转具体的页面)、判断是否有图片64位字符串(将图片加入图片组中)。
其实H5那边处理的就需要加一个延迟操作来判断是否有64位字符串,延迟500毫秒就可以。

总结

这种方式处理webview打开拍照回收很好,只是代码麻烦,并且还需要H5来配合。现在就在想如何优化这边,也不能让用户换手机呀(^_^),想了方法是自定义一个相机,不会产生回收就够用了。这篇文章写的不好,因为没有什么自己的东西,也只自己遇到的回收问题,其实webView就用原生的就好,自从4.4之后换了内核,也不卡顿了,开心。
对于自定义相机,下一篇文章就写个自定义相机,可能要写好久,因为不太懂。先给自己定个目标,做人嘛要有目标,不然和咸鱼有什么区别呢。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/105048
推荐阅读
相关标签
  

闽ICP备14008679号