day11 WebView

WebView中实现拍照功能

最新推荐文章于 2025-06-08 14:57:15 发布

原创最新推荐文章于 2025-06-08 14:57:15 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在WebView中实现拍照功能，通过JS调用安卓原生方法，安卓再调用系统相机进行拍照，并将照片显示在HTML页面上。具体包括WebView设置、权限请求、JS与安卓交互代码及拍照后的图片显示。

WebView 拍照

安卓调JS

JS调安卓

Html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         function camera(){
         window.android.paizhao();
            }
         function camera2(pic){
            document.getElementById("img").src=pic;
         }
          
      </script>
   </head>
   <body>
      <img id="img" width="200" height="200" src="" />
      <button id="bt_camera" onclick="camera()">拍照</button>
   </body>
</html>

其他代码

WebView wv;
    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        String[] str=new String[]{Manifest.permission.ACCESS_FINE_LOCATION,Manifest.permission.ACCESS_COARSE_LOCATION};

        if(Build.VERSION.SDK_INT>=23){
            if(ActivityCompat.checkSelfPermission(this,Manifest.permission.ACCESS_FINE_LOCATION)!=PackageManager.PERMISSION_GRANTED){
                requestPermissions(str,101);
            }
        }
        wv=findViewById(R.id.wv);
        wv.loadUrl("file:///android_asset/fuxi1.html");
        wv.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                wv.loadUrl("file:///android_asset/fuxi1.html");
                return true;
            }
        });
        wv.getSettings().setJavaScriptEnabled(true);
        wv.getSettings().setAllowFileAccess(true);
        wv.addJavascriptInterface(this,"android");

    }
    @JavascriptInterface
    public void paizhao(){
        Toast.makeText(this,"拍张照",Toast.LENGTH_SHORT).show();
        Intent intent = new Intent();


        intent.setAction(MediaStore.ACTION_IMAGE_CAPTURE);
        File file = new File("/sdcard/DCIM/tu.png");


        Uri uri=FileProvider.getUriForFile(this,"com.bw.1705b0",file);


        intent.putExtra(MediaStore.EXTRA_OUTPUT,uri);


        startActivityForResult(intent,101);

    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if(requestCode==101&resultCode==Activity.RESULT_OK){
            wv.loadUrl("JavaScript:camera2('file:////sdcard/DCIM/tu.png')");
        }
    }