js替换html图片吗,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，使 生效

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

webView.setWebChromeClient(new WebChromeClient() {

@Override

public void openFileChooser(ValueCallback valueCallback, String s, String s1) {

uploadMessage = valueCallback;

choosePicture();

}

@Override

public boolean onShowFileChooser(WebView webView, ValueCallback 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

js

function selectFileImage(fileObj) {

//获取文件

var file = fileObj.files['0'];

//创建读取文件的对象

var reader = new FileReader();

//创建文件读取相关的变量

var imgFile;

//为文件读取成功设置事件

reader.οnlοad=function(e) {

console.log('文件读取完成');

imgFile = e.target.result;

console.log(imgFile);

document.getElementById("imgS").setAttribute("src",imgFile);

};

//正式读取文件

reader.readAsDataURL(file);

}