WebView入门(三)——WebView实现拍照及选择图片_webview拍照

作者：AllinToyou | 2024-02-16 23:12:11

踩

webview拍照

WebView实现拍照及选择图片

在安卓开发过程中，会出现对接H5需要拍照及选择本地图片上传的需求。这个功能的实现需要调用安卓的相关操作，然后将获取到的图片路径传给H5。

在这里插入图片描述

1 H5部分

1.1 通过‘input’标签唤起APP执行相关操作

input 标签中type="file" 可用于文件上传，accept="image/*"表示上传的类型为Image类型，点击可通知安卓执行上传操作

<input type="file"
       accept="image/*"
       id="inputimg"/>
1
2
3

1.2 H5接收到安卓上传的文件之后展示在‘img’标签中

H5通过img标签展示安卓端传过来的图片

<img id="image" style="width: 300px; height: 300px;">
1

在JavaScript中执行接收操作

<script type="text/javascript">

    var input = document.getElementById("inputimg");
    var image = document.getElementById("image");
    input.onchange = function () {
       var file = this.files[0];
       var url = URL.createObjectURL(file);
       image.src=url;
    }

  </script>
1
2
3
4
5
6
7
8
9
10
11

2 Android部分

2.1 在WebChromeClient中监听H5页面点击‘input’标签事件

WebView中通过重写WebChromeClinet的onShowFileChooser或openFileChooser方法来实现文件的上传

onShowFileChooser是5.0以上版本使用的，openFileChooser是4.1以上版本使用，但两个版本的API均有ValueCallback参数，通过调用ValueCallback参数的onReceiveValue方法即可将选择图片的Uri传给H5。
因为两个API的实现方式类似，这里只介绍5.0以上的实现方法，不再介绍4.1+的API实现。

// 5.0+
 @Override
 public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
     if (mFilePathCallback != null) {
          mFilePathCallback.onReceiveValue(null);
      }
      mFilePathCallback = filePathCallback;

      Intent intent = gotoChooseFile();  // 选择文件及拍照
      startActivityForResult(intent, REQUEST_CODE_LOLIPOP);
      return true;
  }

 // 4.1+
 public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType, String capture) {

 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.2 选择需要上传的图片

使用系统自带的选择器弹出拍照或选择图片弹框，选中需要上传的图片后回到当前页面。
**注意事项：**

1、安卓6.0+的设备需要动态添加拍照及读写内存的权限，具体实现不再展示；
2、获取图片intent部分的ACTION_GET_CONTENT也可以用ACTION_PICK的方法代替。但不管使用ACTION_GET_CONTENT还是ACTION_PICK，在不同系统的手机上表现不同，例如：在6.0手机上，可能会出现相机、相册、文件管理，如果安装了其他相机，也会出现其他相机的选项；在5.x设备上，可能展示为相机、文档…

/**
     * 选择文件及拍照
     */
    private Intent gotoChooseFile() {
        String saveName = Environment.getExternalStorageDirectory().getPath() + "/" + Environment.DIRECTORY_DCIM + "/Camera/";

        /**
         * 打开相机intent
         */
        Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        if (takePictureIntent.resolveActivity(this.getPackageManager()) != null) {
            File photoFile = null;
            photoFile = new File(saveName + randomFileName() + ".jpg");
            if (!photoFile.exists()) {
                mCameraPhotoPath = "file:" + photoFile.getAbsolutePath();
                takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile));  // 把Uri赋值给takePictureIntent
            } else {
                takePictureIntent = null;
            }
        }

        Intent[] takeoutArray = null;
        if (takePictureIntent != null) {
            takeoutArray = new Intent[]{takePictureIntent};
        } else {
            takeoutArray = new Intent[0];
        }

        /**
         * 获取图片intent
         */
        Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
        contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
        contentSelectionIntent.setType("image/*");

        /**
         * 使用系统选择器
         */
        Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
        chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
        chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, takeoutArray);  // 额外的intent

        return chooserIntent;
    }

    /**
     * 随机产生文件名
     */
    private String randomFileName() {
        return UUID.randomUUID().toString();
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

2.3 在onActivityResult中获取选中图片的Uri

在onActivityResult中将从拍照或者文件中获取的图片Uri传递给H5

若没有选中图片而是点击了空白区域，则onReceiveValue一定要传null，否则无法再次唤起选择器。

@Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == REQUEST_CODE_LOLIPOP) {  // 选择文件返回 5.0+
            Uri[] results = null;
            if (resultCode == RESULT_OK) {
                if (data == null) {
                    if (mCameraPhotoPath != null) {
                        results = new Uri[]{Uri.parse(mCameraPhotoPath)};
                    }
                } else {
                    String dataString = data.getDataString();
                    if (dataString != null) {
                        results = new Uri[]{Uri.parse(dataString)};
                    }
                }
            }
            mFilePathCallback.onReceiveValue(results);  // 当获取要传图片的Uri，通过该方法回调通知
            mFilePathCallback = null;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3 源码

3.1 权限配置

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
1
2
3

3.2 H5

<!DOCTYPE html>
<html>

  <body>
    <input type="file"
           accept="image/*"
           id="inputimg"/>
    <img id="image" style="width: 300px; height: 300px;">
  </body>

  <script type="text/javascript">

    var input = document.getElementById("inputimg");
    var image = document.getElementById("image");
    input.onchange = function () {
       var file = this.files[0];
       var url = URL.createObjectURL(file);
       image.src=url;
    }

  </script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.3 activity

public class MainActivity extends AppCompatActivity {

    private WebView mWebView = null;
    private ValueCallback<Uri[]> mFilePathCallback = null;
    private int REQUEST_CODE_LOLIPOP = 1;  // 5.0以上版本
    private String mCameraPhotoPath = "";  // 拍照的图片路径

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_base_webview);

        mWebView = (WebView) findViewById(R.id.base_web_view);
        showWebView();
    }

    @SuppressLint({"SetJavaScriptEnabled"})
    private void showWebView() {
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        mWebView.loadUrl("file:///android_asset/test2.html");
        showCustomWebChromeClient();
    }

    private void showCustomWebChromeClient() {
        mWebView.setWebChromeClient(new WebChromeClient() {

            // 5.0+
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                if (mFilePathCallback != null) {
                    mFilePathCallback.onReceiveValue(null);
                }
                mFilePathCallback = filePathCallback;

                Intent intent = gotoChooseFile();  // 选择文件及拍照
                startActivityForResult(intent, REQUEST_CODE_LOLIPOP);
                return true;
            }

            // 4.1+
            public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType, String capture) {

            }
        });
    }

    /**
     * 选择文件及拍照
     */
    private Intent gotoChooseFile() {
        String saveName = Environment.getExternalStorageDirectory().getPath() + "/" + Environment.DIRECTORY_DCIM + "/Camera/";

        /**
         * 打开相机intent
         */
        Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        if (takePictureIntent.resolveActivity(this.getPackageManager()) != null) {
            File photoFile = null;
            photoFile = new File(saveName + randomFileName() + ".jpg");
            if (!photoFile.exists()) {
                mCameraPhotoPath = "file:" + photoFile.getAbsolutePath();
                takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile));  // 把Uri赋值给takePictureIntent
            } else {
                takePictureIntent = null;
            }
        }

        Intent[] takeoutArray = null;
        if (takePictureIntent != null) {
            takeoutArray = new Intent[]{takePictureIntent};
        } else {
            takeoutArray = new Intent[0];
        }

        /**
         * 获取图片intent
         */
        Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
        contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
        contentSelectionIntent.setType("image/*");


        /**
         * 使用系统选择器
         */
        Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
        chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
        chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, takeoutArray);  // 额外的intent

        return chooserIntent;
    }

    /**
     * 随机产生文件名
     */
    private String randomFileName() {
        return UUID.randomUUID().toString();
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == REQUEST_CODE_LOLIPOP) {  // 选择文件返回 5.0+
            Uri[] results = null;
            if (resultCode == RESULT_OK) {
                if (data == null) {
                    if (mCameraPhotoPath != null) {
                        results = new Uri[]{Uri.parse(mCameraPhotoPath)};
                    }
                } else {
                    String dataString = data.getDataString();
                    if (dataString != null) {
                        results = new Uri[]{Uri.parse(dataString)};
                    }
                }
            }
            mFilePathCallback.onReceiveValue(results);  // 当获取要传图片的Uri，通过该方法回调通知
            mFilePathCallback = null;
        }
    }

    @Override
    protected void onDestroy() {
        mWebView.removeAllViews();
        mWebView.destroy();
        super.onDestroy();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

4 demo下载

可在这里下载WebView实现拍照及选择图片的demo，如果6.0以上版本demo拍照异常，看一下应用管理中拍照及存储权限是否没有打开。最好在代码中加上动态设置权限的部分。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/97632