Android&H5-js通过jsbridge调用安卓相机/相册/通讯录

引文

是有这样一个需求 在vue里通过js可以直接调用安卓原生的照相机、相册和通讯录,并返回相应数据。当然前提是用webview来进行加载。

Android端处理

  • 在build.gradle引入(moudule:app)
dependencies {
   
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
  • 在build.gradle引入(moudule:本项目)
allprojects {
   
    repositories {
   
        google()
        jcenter()
        maven {
    url "https://jitpack.io" }
    }
}
  • xml代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/web"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.github.lzyzsd.jsbridge.BridgeWebView>

</LinearLayout>
  • java代码
/**
 * Webview
 * @author ace
 * @date 2020/4/16
 */

public class WebView extends AppCompatActivity {
   
    private final static int PHOTO_REQUEST = 100;
    private final static int PHOTO_STORY_REQUEST = 101;
    private final static int CONTACT_REQUEST = 102;
    private BridgeWebView mBridgeWebView;
    private Uri imageUri;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        findViewById();
        init();
    }

    private void findViewById() {
   
        mBridgeWebView = findViewById(R.id.web);
    }

    private void init() {
   
        WebSettings mSettings = mBridgeWebView.getSettings();
        mSettings.setUseWideViewPort(true);
        mSettings.setLoadWithOverviewMode(true);
        mSettings.setDomStorageEnabled(true);
        mSettings.setDefaultTextEncodingName("UTF-8");
        // 是否可访问Content Provider的资源,默认值 true
        mSettings.setAllowContentAccess(true);
        // 是否可访问本地文件,默认值 true
        mSettings.setAllowFileAccess(true);
        mSettings.setJavaScriptEnabled(true);

        mBridgeWebView.setWebChromeClient(new MyWebChromeClient());
        mBridgeWebView.loadUrl("http://10.3.102.129:8080/#/?time=1000015576");

        mBridgeWebView.setDefaultHandler(new BridgeHandler() {
   
            @Override
            public void handler(String data, CallBackFunction function) {
   
                function.onCallBack("DefaultHandler收到Web发来的数据,回传数据给你");
            }
        });

        mBridgeWebView.registerHandler("scan", new BridgeHandler() {
   
            @Override
            public void handler(String data, CallBackFunction function) {
   
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
   
                    if (!checkPermission()) {
   
                        requestPermissions();
                    } else {
   
                        takePhoto();//拍照逻辑
                    }
                } else {
   
                    takePhoto();//拍照逻辑
                }
                function.onCallBack("正在调用相机");
            }
        });

        mBridgeWebView.registerHandler("contact", new BridgeHandler() {
   
            @Override
            public void handler(String data, CallBackFunction function) {
   
                PhotoUtils.takeContact(WebView.this, CONTACT_REQUEST);
                function.onCallBack("正在调用通讯录");
            }
        });


    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
   
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == PHOTO_REQUEST) {
   
            //照相回调
            try {
   
                Bitmap bitmap = PhotoUtils.getBitmapFormUri(this, imageUri);
                mBridgeWebView.callHandler("scanResult", PhotoUtils.bitmapToBase64(bitmap), new CallBackFunction() {
   
                    @Override
                    public void onCallBack(String data) {
   
                        Toast.makeText(WebView.this, data, Toast.LENGTH_SHORT).show();
                    }
                });
            } catch (IOException e) {
   
                e.printStackTrace();
            }
        } else if (requestCode == PHOTO_STORY_REQUEST) {
   
            //相册回调
            Uri[] results = null;
            if (data == null) {
   
                results = null;
            } else {
   
                String dataString = data.getDataString();
                ClipData clipData = data.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)};
                }
            }
            try {
   
                Bitmap bitmap = PhotoUtils.getBitmapFormUri(this, results[0]);
                mBridgeWebView.callHandler("scanResult", PhotoUtils.bitmapToBase64(bitmap), new CallBackFunction() {
   
                    @Override
                    public void onCallBack(String data) {
   
                        Toast.makeText(WebView.this, data, Toast.LENGTH_SHORT).show();
                    }
          
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
### 回答1: 在HTML5中,可以利用JavaScript调用Android设备的相机相册。要实现这个功能,首先需要使用`<input>`标签来创建一个文件上传输入框,然后通过JavaScript来触发文件上传的事件。 ``` <input type="file" id="file-input" accept="image/*" capture> ``` 在上述代码中,`accept`属性用于指定上传的文件类型为图片,而`capture`属性表示可以通过设备的相机来拍照。 然后,在JavaScript中添加以下代码,当点击上传输入框时,弹出相机相册选择: ``` document.getElementById("file-input").addEventListener("click", function() { if (navigator.camera) { // 检测是否支持Camera API navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY // 选择相册 }); } else { alert("此设备不支持相机功能"); } }); function onSuccess(imageURI) { // 在成功获取图片后的处理逻辑 } function onFail(message) { // 获取图片失败时的处理逻辑 alert('获取图片失败: ' + message); } ``` 以上代码中,我们通过`navigator.camera.getPicture`方法来调用Android设备的相机相册,可以设置参数来控制图片的质量、目标类型和来源类型。`onSuccess`函数用于在成功获取图片时进行处理,而`onFail`函数则用于在获取图片失败时进行处理。 这样,当用户点击上传输入框时,会弹出相机相册的选择,用户可以拍照或从相册中选择图片进行上传。 ### 回答2: 要在H5调用Android的弹框相机相册,可以通过以下步骤实现: 1. 在H5页面中,使用Javascript监听触发事件,例如点击一个按钮。 2. 在触发事件的回调函数中,通过Javascript与Android端进行通信,调用Android相机相册功能。可以使用WebView的addJavascriptInterface()方法创建一个Java对象,用于Javascript与Android端的交互。 3. 在Java对象中,实现调用Android相机相册的代码逻辑。可以通过Intent启动Android相机相册应用,并在回调中获取所选图片的路径或相机拍摄的照片数据。 4. 接收到图片路径或数据后,可以通过Javascript回调函数将获取的图片展示在H5页面上。 需要注意的是,调用Android相机相册需要申请相应权限,例如相机权限和访问外部存储器权限。同时,还需要处理Android不同版本的兼容性问题,如Android 6.0以上需要动态申请权限。另外,还需要注意Android设备的厂商定制和系统版本的差异可能导致一些兼容性问题。 总之,通过以上步骤,可以在H5页面中调用Android的弹框相机相册,实现拍照和选择图片的功能。 ### 回答3: 在H5页面中可以通过调用Android相机相册来实现弹框拍照和选择照片的功能。具体的实现步骤如下: 1. 首先,在H5页面中添加一个按钮或者其他的触发元素,用于触发调用相机相册的功能。 2. 在按钮的点击事件中,使用JavaScript与Android的交互方法,例如使用Webview的`addJavascriptInterface`方法,将一个JavaScript对象注入到Android中。 3. 在注入的JavaScript对象中,定义一个方法,用于调用Android相机相册。可以通过Android的`Intent`来实现,调用相机的代码如下: ```java private static final int REQUEST_CAMERA = 1; public void openCamera() { Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(intent, REQUEST_CAMERA); } ``` 调用相册的代码如下: ```java private static final int REQUEST_GALLERY = 2; public void openGallery() { Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI); startActivityForResult(intent, REQUEST_GALLERY); } ``` 4. 在Android中,通过`onActivityResult`方法来处理相机相册的返回结果。可以在其中获取到用户拍摄的照片或选择的照片的Uri。 5. 将获取到的照片Uri返回给H5页面,可以通过调用JavaScript的方法,在Android中使用`WebView`的`loadUrl`方法执行JavaScript代码,来实现将照片Uri传递给H5页面。 通过以上步骤,H5页面就可以调用Android相机相册,并将拍摄的照片或选择的照片显示在页面上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值