android之 h5调用系统相机和相册并显示

最新推荐文章于 2024-02-22 10:04:44 发布
最新推荐文章于 2024-02-22 10:04:44 发布
阅读量9k 收藏 5
点赞数
分类专栏： android 文章标签： android html 相机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/villa_mou/article/details/78256748
版权

先上html界面的代码,放在assets里面就可以了,我也不太会html,所以随便写了点

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>H5页面上传手机照片</title>
</head>
<body>
<script>

function previewFile1() {
        var img = document.getElementById("preview1");
        // 仅限上传单张图片
        var file =document.getElementById("demo1").files[0];
        var text2 = document.getElementById("text2");
        var reader  = new FileReader();
        reader.addEventListener("load", function () {
                img.src = reader.result;  // 存储在本地的图片的base64编码
        }, false);

        if (file) {
          reader.readAsDataURL(file);
        }
     }

     function previewFile2() {
        var img2 = document.getElementById("preview2");
        // 仅限上传单张图片
        var file2 = document.getElementById("demo2").files[0];
        var reader2  = new FileReader();
        reader2.addEventListener("load", function () {
                img2.src = reader2.result;  // 存储在本地的图片的base64编码
        }, false);

        if (file2) {
          reader2.readAsDataURL(file2);
        }
     }

</script>
<form action="">
    <p>图片1: <input type="file" id="demo1" name="uploadImg1" onchange="previewFile1()"/></p>
    <p>图片2: <input type="file" id="demo2" name="uploadImg2" onchange="previewFile2()"/></p>
    <img id="preview1" src="" width="100" height="100"/>
    <br>
    <img id="preview2" src="" width="100" height="100"/>
</form>
</body>
</html>

然后来看看java怎么做
主要是对webview进行操作

public void initWebView() {
        WebView webview = (WebView) findViewById(R.id.act_certification_webview);
        WebSettings webSettings = webview.getSettings();
        //设置WebView属性，能够执行Javascript脚本
        webSettings.setJavaScriptEnabled(true);
        //设置可以访问文件
        webSettings.setAllowFileAccess(true);
        //设置支持缩放
        webSettings.setBuiltInZoomControls(true);
        webview.loadUrl("file:///android_asset/interact.html");
        webview.setWebChromeClient(new WebChromeClient() {

            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {//5.0+
                showDialog();
                mFilePathCallback = filePathCallback;
                return true;
            }

            //openFileChooser 方法是隐藏方法
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {// android 系统版本>4.1.1
                showDialog();
                mFilePathCallback = uploadMsg;
            }

            public void openFileChooser(ValueCallback<Uri> uploadMsg) {//android 系统版本<3.0
                showDialog();
                mFilePathCallback = uploadMsg;
            }

            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {//android 系统版本3.0+
                showDialog();
                mFilePathCallback = uploadMsg;
            }

        });


    }

拍照和相册选择的弹窗

 private void showDialog() {
        NiceDialog
                .init()
                .setLayoutId(R.layout.dialog_choose_photo)
                .setConvertListener(new ViewConvertListener() {
                    @Override
                    public void convertView(ViewHolder holder, final BaseNiceDialog dialog) {
                        holder.setOnClickListener(R.id.dialog_choose_photo_takePhoto, new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                dialog.dismiss();
                                autoObtainCameraPermission(1);
                            }


                        });

                        holder.setOnClickListener(R.id.dialog_choose_photo_gallery, new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                dialog.dismiss();
                                autoObtainStoragePermission(1);

                            }
                        });
                    }
                })

                .setDimAmount(0.5f)
                .setShowBottom(false)
                .setAnimStyle(R.style.popwindow_center_style)
                .setMargin(30)
                .setOutCancel(true)
                .show(getSupportFragmentManager());
    }

先检查是否有权限

    public void autoObtainCameraPermission(int type) {
        this.type = type;
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED
                || ContextCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {

            if (ActivityCompat.shouldShowRequestPermissionRationale(this, Manifest.permission.CAMERA)) {
//                ToastUtils.showToastCenter("您已经拒绝过一次");
            }
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA, Manifest.permission.READ_EXTERNAL_STORAGE}, CAMERA_PERMISSIONS_REQUEST_CODE);
        } else {//有权限直接调用系统相机拍照
            if (CommonUtil.hasSdcard()) {
                imageUri = Uri.fromFile(fileUri);
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N)
                    imageUri = FileProvider.getUriForFile(mContext, mContext.getPackageName() + ".fileprovider", fileUri);//通过FileProvider创建一个content类型的Uri

                PhotoUtils.takePicture(this, imageUri, CODE_CAMERA_REQUEST);
            } else {
                ToastUtils.showToastCenter("设备没有SD卡！");
            }
        }
    }

收到照片的回调

 @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == RESULT_OK) {
            if (requestCode == CODE_CAMERA_REQUEST) {
//                cropImageUri = Uri.fromFile(fileCropUri);
//                PhotoUtils.cropImageUri(this, imageUri, cropImageUri, 1, 1, output_X, output_Y, CODE_RESULT_REQUEST);
                Bitmap bitmapFromUri = PhotoUtils.getBitmapFromUri(imageUri, this);
                int bitmapDegree = getBitmapDegree(imageUri.getPath());
                Bitmap bitmap = rotateBitmapByDegree(bitmapFromUri, bitmapDegree);
                if (bitmap == null) {
                    showToastBottom("对不起,图片不正确!");
                    return;
                }
                try {
                    File fileIcon = new File(Environment.getExternalStorageDirectory().getPath() + "/" + SystemClock.currentThreadTimeMillis() + "4.jpg");
                    saveBitmapToUri(bitmap, fileIcon.getAbsolutePath());
                    getbitmap(type, fileIcon.getPath(), bitmap);
                } catch (IOException e) {
                    showToastBottom("图片压缩异常");
                }

            } else if (CODE_GALLERY_REQUEST == requestCode) {
                if (hasSdcard()) {
//                    cropImageUri = Uri.fromFile(fileCropUri);
                    Uri newUri = Uri.parse(PhotoUtils.getPath(this, data.getData()));
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
                        newUri = FileProvider.getUriForFile(this, mContext.getPackageName() + ".fileprovider", new File(newUri.getPath()));
                    }
                    int bitmapDegree = getBitmapDegree(newUri.getPath());

                    Bitmap bitmapFromUri = PhotoUtils.getBitmapFromUri(newUri, this);
                    if (bitmapFromUri == null) {
                        showToastBottom("对不起,图片不正确!");
                        return;
                    }
                    Bitmap bitmap = rotateBitmapByDegree(bitmapFromUri, bitmapDegree);
                    if (bitmap == null) {
                        showToastBottom("对不起,图片不正确!");
                        return;
                    }
                    try {
                        File fileIcon = new File(Environment.getExternalStorageDirectory().getPath() + "/" + SystemClock.currentThreadTimeMillis() + "4.jpg");
                        saveBitmapToUri(bitmap, fileIcon.getAbsolutePath());
                        getbitmap(type, fileIcon.getPath(), bitmap);
                    } catch (IOException e) {
                        showToastBottom("图片压缩异常");
                    }
//                    PhotoUtils.cropImageUri(this, newUri, cropImageUri, 1, 1, output_X, output_Y, CODE_RESULT_REQUEST);

                } else {
                    ToastUtils.showToastCenter("设备没有SD卡！");
                }
//            } else if (CODE_RESULT_REQUEST == requestCode) {
//                Bitmap bitmap = PhotoUtils.getBitmapFromUri(cropImageUri, this);
//                if (bitmap != null && cropImageUri != null) {
//
                    getbitmap(type, cropImageUri, bitmap);
//                }
            }
        }
    }


    /**
     * 读取图片的旋转的角度
     *
     * @param path 图片绝对路径
     * @return 图片的旋转角度
     */
    private int getBitmapDegree(String path) {
        int degree = 0;
        try {
            // 从指定路径下读取图片，并获取其EXIF信息
            ExifInterface exifInterface = new ExifInterface(path);
            // 获取图片的旋转信息
            int orientation = exifInterface.getAttributeInt(ExifInterface.TAG_ORIENTATION,
                    ExifInterface.ORIENTATION_NORMAL);
            switch (orientation) {
                case ExifInterface.ORIENTATION_ROTATE_90:
                    degree = 90;
                    break;
                case ExifInterface.ORIENTATION_ROTATE_180:
                    degree = 180;
                    break;
                case ExifInterface.ORIENTATION_ROTATE_270:
                    degree = 270;
                    break;
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return degree;
    }

    /**
     * 将图片按照某个角度进行旋转
     *
     * @param bm     需要旋转的图片
     * @param degree 旋转角度
     * @return 旋转后的图片
     */
    public Bitmap rotateBitmapByDegree(Bitmap bm, int degree) {
        Bitmap returnBm = null;
        // 根据旋转角度，生成旋转矩阵
        Matrix matrix = new Matrix();
        matrix.postRotate(degree);
        try {
            // 将原始图片按照旋转矩阵进行旋转，并得到新的图片
            returnBm = Bitmap.createBitmap(bm, 0, 0, bm.getWidth(), bm.getHeight(), matrix, true);
        } catch (OutOfMemoryError e) {

        }
        if (returnBm == null) {
            returnBm = bm;
        }
        if (bm != returnBm) {
            bm.recycle();
        }
        return returnBm;
    }

    /**
     * 把压缩后的bitmap转化为file;
     *
     * @param path;压缩后的file路径
     */
    private boolean saveBitmapToUri(Bitmap bitmap, String path)
            throws IOException {
        File file = new File(path);
        if (file.exists()) {
            if (file.delete()) {
                if (!file.createNewFile()) {
                    return false;
                }
            }
        }
        BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(file));
        bitmap.compress(Bitmap.CompressFormat.JPEG, 100, outStream);//100为压缩的品质,100为100%
        outStream.flush();
        outStream.close();
        return true;
    }

回调webview

   @Override
    protected void getbitmap(int type, String imagePath, Bitmap bitmap) {
        Uri uri = Uri.fromFile(new File(imagePath));
        if (Build.VERSION.SDK_INT > 18) {
            mFilePathCallback.onReceiveValue(new Uri[]{uri});
        } else {
            mFilePathCallback.onReceiveValue(uri);
        }

    }

来看效果图
这里写图片描述

villa_mou
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
android 之 webView 显示h5 执行选择图片或者拍照功能
09-05
开发工具是 android studio SDK版本是 4.3 实现过程基本是这样 h5中调用手机选择文件图片的代码是： 用安卓的 webView 控件来显示h5网页 然后给webView 设置WebChromeClient WebChromeClient 主要处理解析，渲染网页等浏览器做的事情 设置完毕后 重写WebChromeClient 的openFileChooser方法即可实现h5调用手机摄像头了。 但是这个方法的使用却不简单，这个方法是要调用webview的setWebChromeClient方法，然后重写一个WebChromeClient类。来到这一步，相信有点开发经验的同行都不难解决。问题的关键就在于，当你重写WebChromeClient这个类的时候会发现，根本就没有openFileChooser这个方法，那要怎么重写呢？是不是意味着这个方法其实行不通？于是再次翻查资料，发现原来这个方法居然是隐藏方法，并不不存在显性的继承重写关系。 最后，我发现要使用这个方法，还得自己继承WebChromeClient这个类把openFileChooser(ValueCallback uploadFile)这个方法给写出来，代码如下：
Html调Android拍照回传地址回显
11-23
Android&H5;混合开发之拍照裁剪图片回传显示。几分钟搞定
H5获取手机相机或相册图片两种方式-Android通过webview传递多张照片给H5
最新发布
麦小洛
02-22 1815
H5调用公共获取图片文件方法，在android手机端，H5主要依赖Webview,这边在webview声明并重写该方法onShowFileChooser使用工具类打开相机或相册，可以两种方式安卓原生方式或者利用第三方组件库方式选中图片，返回uri列表给H5H5收到uri照片列表，并且使用前端方式展示！
react-native 展示安卓本地的图片
ln1010的博客
12-28 360
file:///storage/emulated/0/ 为设备文件管理的根目录，在安卓的文件目录中，根目录有storage目录，目录里有emulated ，emulated里又有0目录，以为file:///storage/emulated/0/是这个目录的路径，谁知道这个就是设备的根目录，有误导的意思。React-Native 项目中，用Image标签显示本地图片,路径加上"storage/emulated/0/"
html 中img标签加载Android本地的图片不显示的问题
大王叫我来巡山
04-06 2465
第一步：先将android访问本地存储的权限打开 第二步：设置webview的访问本地属性属性 WebSettings webSettings=webView.getSettings(); //允许webview对文件的操作 webSettings.setAllowUniversalAccessFromFileURLs(true); ...
安卓WebView(H5)调用原生相机及相册
m0_46366678的博客
02-03 6282
WebView(h5)调用安卓原生相机或者相册
Android调用H5页面上传文件需注意路径问题
lgs7907
02-06 944
编者：李国帅 qq：9611153 微信lgs9611153 时间：2021/2/6 问题描述果： 在使用android使用webview调用h5页面上传文件遇到了无法上传的问题。排除h5页面兼容性和js语法错误后，还是无法上传。怎么回事呢？ 解决方案: 原来android在选择文件之后，获取的图像路径imageUrl没有携带协议头，比如file:// 结果下面的语句不出错，但是无法上传。 // imageUrl：/storage/emulated/0/myPhoto/2021_..
android 从图库或者相机拍照获得照片并显示在界面上
ljp345775的博客
09-14 2466
首先，不管是从图库还是从打开相机拍照，都是先拿到照片的路径，然后再对照片进行处理，比如要先压缩，因为现在的照片比较大，如果不进行压缩，会造成内存溢出，而且由于手机型号的不同，也会是拍出来的照片角度不同，所以我们也要对照片进行旋转角度，最后再展示到界面上。效果如下： 不管是打开图库，还是打开相机，这些代码网上都有，我给整合了一下，代码如下：public class MainActivity ex
h5调用手机相册上传文件、返回File文件/上传结果路径
lys20000913的博客
04-13 945
h5调用手机相册上传文件、返回File文件/上传结果路径
Android上 用Html5做界面，javascript调用摄像头实例
weixin_30821731的博客
02-26 128
Android开发时候，界面制作基本会耗去大半部分时间，而且只能开发人员自己制作，所以一直想借用HTML5+CSS3完成，PhoneGap还不太成熟，自己准备用Android原生+WebView完成，发现和Flash As做互调差不多。以下代码是通过HTML的javascript调用原生接口，完成照片选取的代码，点击图像，将选择图片（从相机或者摄像头）。照片选取代码见上一篇文章 《And...
Android开发WebView配置+H5调用相册拍照
04-12
Android开发WebView配置,，兼容H5调用Android手机相册和拍照。并显示。 博客地址：https://blog.csdn.net/To_be_Designer/article/details/79914043
Android混合开发之H5调用系统相机和相册
01-03
又由于Android系统自带的WebView被人吐槽过多，所以决定使用腾讯封装的X5内核的WebView，使用和方法上和系统的相差不大。 第一步：在布局中使用WebView。 我们设置一个progressbar用来提示加载进度，我想从用户...
Android网页H5 Input选择相机和系统相册
08-26
主要为大家详细介绍了Android网页H5 Input选择相机和系统相册，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
h5页面调用相机、相册、录像、录音
06-08
移动端浏览器和手机APP，h5页面调用相机、相册、录像、录音，可以选择本地相册；以及文件的读取和加载方法， 调用FileReader对象的方法
Android调用系统相机、相册实现拍照、图片多选Demo移动开发
06-13
应开发需要，不想调用第三方库实现功能。调用系统相机拍照，系统相册进行多选。注意多选照片时要长按一张图片变为多选。
android Webview（H5）中调用相册和拍照
08-15
这是一个大神的东西，我拿过来修改了一下，对android不同的版本进行了适配。如果那位大神看到了，觉得我侵权了，请联系我。
android 高德地图之poi搜索功能的实现
villa_mou的博客
08-30 7072
二话不多说,先看效果 这个功能我是用Fragmentdialog里面做的,也遇到不少坑 第一,就是设置背景的drawable为纯白色导致键盘弹出的时候,recyclerview的布局被顶上去导致出现白色布局,有点扎眼;最后改成了设置为和背景色一个颜色就和好了 Window window = getDialog().getWindow(); WindowManager.Lay
h5调用android弹框相机相册
07-03
### 回答1： 在HTML5中，可以利用JavaScript调用Android设备的相机和相册。要实现这个功能，首先需要使用`<input>`...通过以上步骤，H5页面就可以调用Android的相机和相册，并将拍摄的照片或选择的照片显示在页面上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值