JsBridge替换腾讯x5内核，选择图库内照片并显示到html

准备工作

1、下载JsBridgedemo
拷贝library/src/main/java/com/github/lzyzsd/jsbridge下源码到自己的项目中
拷贝library/src/main/assets/目录下WebViewJavascriptBridge.js到项目资源目录
2、下载x5内核Android SDK（完整版）

开启x5内核

在项目的Application中开启x5内核

    /**
     * 开启x5内核
     */
    private void initX5WebView() {
        //搜集本地tbs内核信息并上报服务器，服务器返回结果决定使用哪个内核。
        QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
            @Override
            public void onCoreInitFinished() {
            }

            @Override
            public void onViewInitFinished(boolean b) {
                //X5内核初始化完成，true使用x5内核，false使用系统内核
                LogUtil.e("x5内核使用：" + b);
            }
        };
        //x5内核初始化
        QbSdk.initX5Environment(getApplicationContext(), cb);
    }

当日志输入 x5内核使用：false 时，代表x5内核开启失败，使用系统内核。
原因之一，app之前用系统内核，创建的数据库，x5无法使用。（日志会有输出）
解决方法：删除app重新安装即可。

替换内核

1、BridgeWebView中继承的android.webkit.WebView替换为com.tencent.smtt.sdk.WebView
2、BridgeWebViewClient继承的android.webkit.WebViewClient替换为com.tencent.smtt.sdk.WebViewClient

重写WebChromeClient，使<input type="file" /> 生效

1、新建WebChromeClient，重写文件上传回调方法

        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void openFileChooser(ValueCallback<Uri> valueCallback, String s, String s1) {
                uploadMessage = valueCallback;
                choosePicture();
            }

            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback, FileChooserParams fileChooserParams) {
                uploadMessageAboveL = valueCallback;
                choosePicture();
                return true;
            }
        });

当系统版本高于21（5.0）是，valueCallback.onReceiveValue()方法接收的是Uri数组，需要特殊处理。
2、打开系统照片选择器

    private void choosePicture() {
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);
        i.addCategory(Intent.CATEGORY_OPENABLE);
        i.setType("image/*");
        startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_REQUEST_CODE);
    }

3、选择图片并处理

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode == FILE_CHOOSER_REQUEST_CODE) {
            Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
            if (uploadMessageAboveL != null) {
                onActivityResultAboveL(data);
            } else if (uploadMessage != null) {
                uploadMessage.onReceiveValue(result);
                uploadMessage = null;
            }
        }
    }

4、高于5.0系统特殊处理

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void onActivityResultAboveL(Intent intent) {
        Uri[] results = null;
        if (intent != null) {
            String dataString = intent.getDataString();
            ClipData clipData = intent.getClipData();
            if (clipData != null) {
                results = new Uri[clipData.getItemCount()];
                for (int i = 0; i < clipData.getItemCount(); i++) {
                    ClipData.Item item = clipData.getItemAt(i);
                    results[i] = item.getUri();
                }
            }
            if (dataString != null)
                results = new Uri[]{Uri.parse(dataString)};
        }
        uploadMessageAboveL.onReceiveValue(results);
        uploadMessageAboveL = null;
    }

H5端代码
html

<img id="imgS" style="width: 50%; height: auto; margin: auto" >
<input type="file"  accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);">

js

<script>
    function selectFileImage(fileObj) {
        //获取文件
        var file = fileObj.files['0'];
    
        //创建读取文件的对象
        var reader = new FileReader();
    
        //创建文件读取相关的变量
        var imgFile;
    
        //为文件读取成功设置事件
        reader.onload=function(e) {
            console.log('文件读取完成');
            imgFile = e.target.result;
            console.log(imgFile);
            <!--document.getElementById("imgS").src= imgFile;-->
            document.getElementById("imgS").setAttribute("src",imgFile);
        };
    
        //正式读取文件
        reader.readAsDataURL(file);
    }
</script>