JsBridge替換騰訊x5內(nèi)核,選擇圖庫(kù)內(nèi)照片并顯示到html

準(zhǔn)備工作

1、下載JsBridgedemo
拷貝library/src/main/java/com/github/lzyzsd/jsbridge下源碼到自己的項(xiàng)目中
拷貝library/src/main/assets/目錄下WebViewJavascriptBridge.js到項(xiàng)目資源目錄
2、下載x5內(nèi)核Android SDK(完整版)

開啟x5內(nèi)核

在項(xiàng)目的Application中開啟x5內(nèi)核

    /**
     * 開啟x5內(nèi)核
     */
    private void initX5WebView() {
        //搜集本地tbs內(nèi)核信息并上報(bào)服務(wù)器,服務(wù)器返回結(jié)果決定使用哪個(gè)內(nèi)核。
        QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
            @Override
            public void onCoreInitFinished() {
            }

            @Override
            public void onViewInitFinished(boolean b) {
                //X5內(nèi)核初始化完成,true使用x5內(nèi)核,false使用系統(tǒng)內(nèi)核
                LogUtil.e("x5內(nèi)核使用:" + b);
            }
        };
        //x5內(nèi)核初始化
        QbSdk.initX5Environment(getApplicationContext(), cb);
    }

當(dāng)日志輸入 x5內(nèi)核使用:false 時(shí),代表x5內(nèi)核開啟失敗,使用系統(tǒng)內(nèi)核。
原因之一,app之前用系統(tǒng)內(nèi)核,創(chuàng)建的數(shù)據(jù)庫(kù),x5無法使用。(日志會(huì)有輸出)
解決方法:刪除app重新安裝即可。

替換內(nèi)核

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,重寫文件上傳回調(diào)方法

        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;
            }
        });

當(dāng)系統(tǒng)版本高于21(5.0)是,valueCallback.onReceiveValue()方法接收的是Uri數(shù)組,需要特殊處理。
2、打開系統(tǒng)照片選擇器

    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系統(tǒng)特殊處理

    @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'];
    
        //創(chuàng)建讀取文件的對(duì)象
        var reader = new FileReader();
    
        //創(chuàng)建文件讀取相關(guān)的變量
        var imgFile;
    
        //為文件讀取成功設(shè)置事件
        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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,355評(píng)論 25 708
  • 關(guān)于這份調(diào)研報(bào)告,不是從技術(shù)角度深入探索,重點(diǎn)是從產(chǎn)品本身分析,通俗易懂才是重點(diǎn)。主要是為了鍛煉平時(shí)做技術(shù)調(diào)研和競(jìng)...
    石先閱讀 23,895評(píng)論 13 48
  • 最基礎(chǔ)的使用方法 最簡(jiǎn)單的布局: 在Activity中使用WebView: 但只是這樣的話,在模擬器上是會(huì)直接調(diào)到...
    HolenZhou閱讀 7,953評(píng)論 12 33
  • 我小的時(shí)候和同學(xué)們一樣,也站在操場(chǎng)上做早操,當(dāng)時(shí)就特別羨慕站在國(guó)旗下升國(guó)旗的同學(xué),夢(mèng)想自己有天也能站在國(guó)旗下。...
    一不小生閱讀 569評(píng)論 0 1
  • 一 提到《鳳囚凰》,看過這本書的讀者大概都會(huì)第一個(gè)想到那個(gè)號(hào)稱“一見容止誤終身,不見容止終身誤”的傾世少年,他外表...
    寥寥Alison閱讀 3,897評(píng)論 2 25

友情鏈接更多精彩內(nèi)容