Html页面Js调用android本地相机和图片
生活随笔
收集整理的這篇文章主要介紹了
Html页面Js调用android本地相机和图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天遇到了這個需求，4.4版本及以上有點變化需要添加@JavascriptInterface注釋
這里面用到了防微信獲取圖片的方式，具體需要的庫和類，請看上一篇博客：防微信拍照和圖片選擇開源庫multi-image-selector
http://blog.csdn.net/huangxiaoguo1/article/details/53084166
好了進入正題
先看效果
一、在Html中（我放在了本地assets目錄內）
二、在MainActivity中
package cn.hnshangyu.htmlopencamera;import android.Manifest; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.drawable.BitmapDrawable; import android.os.Bundle; import android.provider.MediaStore; import android.support.v4.app.ActivityCompat; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.view.animation.AnimationUtils; import android.webkit.JavascriptInterface; import android.webkit.WebSettings; import android.webkit.WebView; import android.widget.Button; import android.widget.LinearLayout; import android.widget.PopupWindow; import android.widget.RelativeLayout;import java.util.ArrayList; import java.util.List;import cn.hnshangyu.htmlopencamera.utils.AppUtils; import cn.hnshangyu.htmlopencamera.utils.FileUtils; import cn.hnshangyu.htmlopencamera.utils.StringUtil; import cn.hnshangyu.htmlopencamera.utils.UIUtils; import me.nereo.multi_image_selector.MultiImageSelector;public class MainActivity extends AppCompatActivity {private WebView webView;private WebSettings webSettings;/*** 當前Activity的實例*/protected Activity mActivity;/*** 當前上下文實例*/protected Context mContext;private static final int TAKE_PICTURE = 0x000001;private static final int REQUEST_IMAGE = 0x012;private static final String DEFAULT_URL = "file:///android_asset/test.html";// 拍照，SD卡所需的全部權限String[] mPermissionList = new String[]{Manifest.permission.CAMERA,Manifest.permission.READ_EXTERNAL_STORAGE};private PopupWindow pop;private LinearLayout ll_popup;/*** 選擇的照片*/private List<String> selectImages = new ArrayList<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mContext = this;mActivity = this;webView = (WebView) findViewById(R.id.webView);initWebView();Init();webView.loadUrl(DEFAULT_URL);}private void Init() {pop = new PopupWindow(this);View view = getLayoutInflater().inflate(R.layout.item_popupwindows, null);ll_popup = (LinearLayout) view.findViewById(R.id.ll_popup);pop.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);pop.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);pop.setBackgroundDrawable(new BitmapDrawable());pop.setFocusable(true);pop.setOutsideTouchable(true);pop.setContentView(view);RelativeLayout parent = (RelativeLayout) view.findViewById(R.id.parent);Button bt1 = (Button) view.findViewById(R.id.item_popupwindows_camera);Button bt2 = (Button) view.findViewById(R.id.item_popupwindows_Photo);Button bt3 = (Button) view.findViewById(R.id.item_popupwindows_cancel);parent.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {pop.dismiss();ll_popup.clearAnimation();}});bt1.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {if (!AppUtils.isCameraGranted(mContext) && AppUtils.getAPIVersionCode() >= 23) {UIUtils.showToast("請設置攝像頭權限");return;}photo();pop.dismiss();ll_popup.clearAnimation();}});bt2.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {if (!AppUtils.isReadExternalStoragGranted(mContext) && AppUtils.getAPIVersionCode() >= 23) {UIUtils.showToast("請設置SD卡讀取權限");return;}MultiImageSelector selector = MultiImageSelector.create();selector.showCamera(false);// selector.count(5);selector.single();//selector.multi();selector.origin((ArrayList<String>) selectImages);selector.start(mActivity, REQUEST_IMAGE);overridePendingTransition(R.anim.activity_translate_in, R.anim.activity_translate_out);pop.dismiss();ll_popup.clearAnimation();}});bt3.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {pop.dismiss();ll_popup.clearAnimation();}});}protected void onActivityResult(int requestCode, int resultCode, Intent data) {if (resultCode == RESULT_OK) {switch (requestCode) {case TAKE_PICTURE://拍照String fileName = String.valueOf(System.currentTimeMillis());Bitmap bm = (Bitmap) data.getExtras().get("data");String path = FileUtils.saveBitmap(bm, fileName);if (!StringUtil.isBland(path))selectImages.add(path);UIUtils.showToast("selectImages.size() = " + selectImages.size());break;case REQUEST_IMAGE://相冊selectImages = data.getStringArrayListExtra(MultiImageSelector.EXTRA_RESULT);UIUtils.showToast("selectImages.size() = " + selectImages.size());break;}}super.onActivityResult(requestCode, resultCode, data);}public void photo() {Intent openCameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);startActivityForResult(openCameraIntent, TAKE_PICTURE);}private void initWebView() {// 獲得 webView的設置webSettings = webView.getSettings();/*** 設置當前頁面可以執行js 代碼，默認情況下是false*/webSettings.setJavaScriptEnabled(true);webSettings.setDefaultZoom(WebSettings.ZoomDensity.FAR); // 設置默認縮放級別webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);// 以單列的形式排列布局// webView 自帶 的縮放按鈕與webView的觸摸事件有沖突// webSettings.setBuiltInZoomControls(true); // 顯示默認的縮放按鈕webView.setOnTouchListener(new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {System.out.println("onTouch============");return false;// 如果返回true 網頁就不能響應觸摸操作了}});/** 為webView 添加一個js 接口* 參數一： 是一個java對象* 參數二：是一個隨意的字符串* 該方法的功能是在網頁中創建一個js 對象，對象名就是參數二字符串。js對象中的功能，由參數一提供。*/webView.addJavascriptInterface(new Object() {/*** 聲明一個在js 中可以調用的方法，* 注意：4.4以上這里要加注解。* 類名：shangyukeji和方法名paizhao跟html保持一致*/@JavascriptInterfacepublic void paizhao() {// 缺少權限時, 進入權限配置頁面ActivityCompat.requestPermissions(mActivity, mPermissionList, 100);ll_popup.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.activity_translate_in));pop.showAtLocation(webView, Gravity.BOTTOM, 0, 0);UIUtils.showToast("paizhao");}}, "shangyukeji");}}總結
以上是生活随笔為你收集整理的Html页面Js调用android本地相机和图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【设计模式】职责链模式，MySQL+To
- 下一篇： getchar()用法