应用场景:h5通知android端拍照,选相册,然后将图片路径上传成功之后,获取到网络路径,将此路径返还给h5界面,并展示出来。
android与js快速交互
效果图如下:
1.在Activity类中,通过webview拦截协议,开始拍照或选择相册。
mWebView = (WebView) findViewById(R.id.wv);
//设置webview可以与js交互
mWebView.getSettings().setJavaScriptEnabled(true);
//设置webview加载本地h5页面
mWebView.loadUrl(“file:///android_asset/choosePic.html”);
//设置监听,获取webview访问的url
mWebView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 重写此方法表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边
if(url.contains(“hgj://take/photo”)){
//js定义的协议,android用webview进行拦截 然后本地调用拍照等功能
showPopupWindow((LinearLayout) findViewById(R.id.act_index));
}else {
view.loadUrl(url);
}
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
}
});
2. 注册js接口,JSInterface是自定义的类,里面放的方法必须与js中的方法一致,参数二也是与js协定的,必须与js保持一致。
mWebView.addJavascriptInterface(new JSInterface(), "hgj");
//js接口类
private class JSInterface {
@JavascriptInterface
public void acceptUrl(String imgUrl) {//此方法是将android端获取的url返给js
}
@JavascriptInterface
public void fnUrl(String s) {
//js可以调用此方法 将s值传给android端,然后android端进行相应的操作,此参数可以是任意类型的
}
@JavascriptInterface
public void fnId(String received){
//android 调用js js会回传参数
Log.i("received--","---"+received);
}
}
3.拍照、上传图片相关方法
//确认上传图片
private void upload(String path) throws FileNotFoundException {
//此处可以写入上传图片的方法 这里就直接将拍照和选择相册得到的本地路径返回
url=path;
Message msg = new Message();
msg.what = 0;
mHandler1.sendMessage(msg);
}
/*
* 相册或相机
* */
private void showPopupWindow(LinearLayout parent) {
if (popWindow == null) {
View view = LayoutInflater.from(context).inflate(R.layout.pop_select_photo, null);
// 相机/相册/取消选择界面
popWindow = new PopupWindow(view, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, true);
initPop(view);// 初始化popwindow参数
}
popWindow.setAnimationStyle(android.R.style.Animation_InputMethod);
popWindow.setFocusable(true);
popWindow.setOutsideTouchable(true);
popWindow.setBackgroundDrawable(new BitmapDrawable());
popWindow.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
popWindow.showAtLocation(parent, Gravity.CENTER, 0, 0);
}
// 初始化popwindow参数
public void initPop(View view) {
photograph = (TextView) view.findViewById(R.id.photograph);// 拍照
albums = (TextView) view.findViewById(R.id.albums);// 相册
cancel = (LinearLayout) view.findViewById(R.id.cancel);// 取消
// 相机拍照监听
photograph.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
popWindow.dismiss();
photoSaveName = String.valueOf(System.currentTimeMillis()) + ".png";
photoSavePath = Environment.getExternalStorageDirectory() + "/usershg/cache/";
Uri imageUri = null;
Intent openCameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
imageUri = Uri.fromFile(new File(photoSavePath, photoSaveName));
openCameraIntent.putExtra(MediaStore.Images.Media.ORIENTATION, 0);
openCameraIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
startActivityForResult(openCameraIntent, PHOTOTAKE);
}
});
// 相册获取监听
albums.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
popWindow.dismiss();
Intent openAlbumIntent = new Intent(Intent.ACTION_GET_CONTENT);
openAlbumIntent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");
startActivityForResult(openAlbumIntent, PHOTOZOOM);
}
});
// 取消监听
cancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
popWindow.dismiss();
}
});
}
@SuppressLint("NewApi")
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (resultCode != RESULT_OK) {
return;
}
Uri uri = null;
switch (requestCode) {
case PHOTOZOOM:// 相册
if (data == null) {
return;
}
uri = data.getData();
path = getImageAbsolutePath(this, uri);
//获取到图片路径,开始上传
try {
upload(path);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
break;
case PHOTOTAKE:// 拍照
path = photoSavePath + photoSaveName;
//获取到图片路径,开始上传
try {
upload(path);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
break;
default:
break;
}
}
/**
* 根据Uri获取图片绝对路径,解决Android4.4以上版本Uri转换
*
* @param
* @param imageUri
* @author yaoxing
* @date 2014-10-12
*/
@TargetApi(19)
public static String getImageAbsolutePath(Activity context, Uri imageUri) {
if (context == null || imageUri == null)
return null;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT && DocumentsContract.isDocumentUri(context, imageUri)) {
if (isExternalStorageDocument(imageUri)) {
String docId = DocumentsContract.getDocumentId(imageUri);
String[] split = docId.split(":");
String type = split[0];
if ("primary".equalsIgnoreCase(type)) {
return Environment.getExternalStorageDirectory() + "/" + split[1];
}
} else if (isDownloadsDocument(imageUri)) {
String id = DocumentsContract.getDocumentId(imageUri);
Uri contentUri = ContentUris.withAppendedId(Uri.parse("content://downloads/public_downloads"), Long.valueOf(id));
return getDataColumn(context, contentUri, null, null);
} else if (isMediaDocument(imageUri)) {
String docId = DocumentsContract.getDocumentId(imageUri);
String[] split = docId.split(":");
String type = split[0];
Uri contentUri = null;
if ("image".equals(type)) {
contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
} else if ("video".equals(type)) {
contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
} else if ("audio".equals(type)) {
contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
}
String selection = MediaStore.Images.Media._ID + "=?";
String[] selectionArgs = new String[]{split[1]};
return getDataColumn(context, contentUri, selection, selectionArgs);
}
} // MediaStore (and general)
else if ("content".equalsIgnoreCase(imageUri.getScheme())) {
// Return the remote address
if (isGooglePhotosUri(imageUri))
return imageUri.getLastPathSegment();
return getDataColumn(context, imageUri, null, null);
}
// File
else if ("file".equalsIgnoreCase(imageUri.getScheme())) {
return imageUri.getPath();
}
return null;
}
public static String getDataColumn(Context context, Uri uri, String selection, String[] selectionArgs) {
Cursor cursor = null;
String column = MediaStore.Images.Media.DATA;
String[] projection = {column};
try {
cursor = context.getContentResolver().query(uri, projection, selection, selectionArgs, null);
if (cursor != null && cursor.moveToFirst()) {
int index = cursor.getColumnIndexOrThrow(column);
return cursor.getString(index);
}
} finally {
if (cursor != null)
cursor.close();
}
return null;
}
/**
* @param uri The Uri to check.
* @return Whether the Uri authority is ExternalStorageProvider.
*/
public static boolean isExternalStorageDocument(Uri uri) {
return "com.android.externalstorage.documents".equals(uri.getAuthority());
}
/**
* @param uri The Uri to check.
* @return Whether the Uri authority is DownloadsProvider.
*/
public static boolean isDownloadsDocument(Uri uri) {
return "com.android.providers.downloads.documents".equals(uri.getAuthority());
}
/**
* @param uri The Uri to check.
* @return Whether the Uri authority is MediaProvider.
*/
public static boolean isMediaDocument(Uri uri) {
return "com.android.providers.media.documents".equals(uri.getAuthority());
}
/**
* @param uri The Uri to check.
* @return Whether the Uri authority is Google Photos.
*/
public static boolean isGooglePhotosUri(Uri uri) {
return "com.google.android.apps.photos.content".equals(uri.getAuthority());
}
4.拍照成功获取url后传给js
//此处将拍照或选择相册返回的url传给js
mWebView.loadUrl("javascript:acceptUrl('" + url + "')");
5. js给android传数据
js只需要调用window.hgj.fnId(received);就可以了。
hgj:是我们之前android和js定的,如mWebView.addJavascriptInterface(new JSInterface(), "hgj");中的最后一个参数
fnId()是方法名,js把参数传进去,我们android端只要写好这个方法,直接loadUrl获取参数就可以了,如wv.loadUrl("javascript:fnId()");
h5页面:
源码位置:https://download.csdn.net/download/feitailang/10839514
源码项目截图: