应用场景: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
源码项目截图: