Android webView拍照与展示相册图片

最新推荐文章于 2024-05-16 06:17:17 发布
最新推荐文章于 2024-05-16 06:17:17 发布
阅读量2.2k 收藏 7
点赞数
分类专栏： Android 文章标签： android webView拍照相册 webView交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a748448660/article/details/82389904
版权

一.准备工作

1.测试平板：android 7.0
2.androidSDK:26
这里写图片描述

二.实验步骤

2.1)利用android Studio 新建项目
这里写图片描述

2.2)增加webView标签在 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.com.myapplication.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/ly_content">

        <WebView
            android:id="@+id/web_map"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>

</android.support.constraint.ConstraintLayout>

2.3) 新建test.html 在assets下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<input id="fileImage" type="file" size="300" onchange="showImage()"  name="fileselect" accept="image/*" />
<img src="" id="show" width="200">
<script>

    function showImage() {

        var reads= new FileReader();
        f=document.getElementById('fileImage').files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {
            document.getElementById('show').src=this.result;
        };
    }

</script>
</body>

</html>

2.4) 获取相机、存储、定位权限，代码写在 MainActivity.java

private  void initPower(){
        int checkCallPhonePermission = ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA);
        int locations = ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.ACCESS_FINE_LOCATION);
        int storgeWrite =ContextCompat.checkSelfPermission(MainActivity.this,Manifest.permission.WRITE_EXTERNAL_STORAGE);
        int storgeRead =ContextCompat.checkSelfPermission(MainActivity.this,Manifest.permission.READ_EXTERNAL_STORAGE);
        if (checkCallPhonePermission != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.CAMERA}, 6);
        }

        if(locations != PackageManager.PERMISSION_GRANTED){
            ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.ACCESS_FINE_LOCATION}, 7);
        }
        if(storgeRead != PackageManager.PERMISSION_GRANTED){
            ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, 8);
        }
        if(storgeWrite != PackageManager.PERMISSION_GRANTED){
            ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE}, 8);
        }
    }

与此同时；在AndroidMainfest.xml 设置权限

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.com.myapplication">

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <!--Explicit permission needed only for DownloadManager, see #723-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- 在SDCard中创建与删除文件权限 -->
    <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>

    <uses-permission android:name="android.permission.CAMERA"/>

    <uses-feature android:name="android.hardware.camera" /> <!-- 使用照相机权限 -->
    <uses-feature android:name="android.hardware.camera.autofocus" /> <!-- 自动聚焦权限 -->

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

2.5) 在MainActivity.java 初始化webView

 private WebView wView; //web展示地图
  public void readWebMap(){
        wView = (WebView) findViewById(R.id.web_map);
        wView.loadUrl("file:///android_asset/test.html");
        WebSettings settings = wView.getSettings();

        settings.setJavaScriptEnabled(true);    //设置webview支持javascript
        settings.setLoadsImagesAutomatically(true);    //支持自动加载图片
        settings.setUseWideViewPort(true);    //设置webview推荐使用的窗口，使html界面自适应屏幕
        settings.setLoadWithOverviewMode(true);
        settings.setSaveFormData(true);    //设置webview保存表单数据

        settings.setSupportMultipleWindows(true);
        settings.setAppCacheEnabled(true); //设置APP可以缓存
        settings.setDatabaseEnabled(true);
        settings.setDomStorageEnabled(true);//返回上个界面不刷新  允许本地缓存
        settings.setAllowFileAccess(true);// 设置可以访问文件

        wView.setLongClickable(true);
        wView.setScrollbarFadingEnabled(true);
        wView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        wView.setDrawingCacheEnabled(true);


        //添加客户端支持
        wView.setWebChromeClient(new MyWebChromeClient() );

    }
    //自定义chromeClient
private class MyWebChromeClient extends WebChromeClient {

        // For Android 3.0+
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {

            mUploadMessage = uploadMsg;
            openImageChooserActivity();


        }

        // For Android 3.0+
        public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
            mUploadMessage = uploadMsg;
            openImageChooserActivity();
        }

        // For Android 4.1
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            mUploadMessage = uploadMsg;
            openImageChooserActivity();

        }

        // For Android 5.0+
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
            mUploadCallbackAboveL = filePathCallback;
            openImageChooserActivity();
            return true;
        }


    }

2.6) 当页面选择文件后，利用MaterialDialog 选择 拍照还是相册，进行图片的选择，并返回到html 

  ///选择拍照还是相册
    public void openImageChooserActivity() {
        new MaterialDialog.Builder(this)
                .items(stocks)
                .positiveText("取消")
                .onPositive(new MaterialDialog.SingleButtonCallback() {
                    @Override
                    public void onClick(@NonNull MaterialDialog dialog, @NonNull DialogAction which) {
                        if (mUploadCallbackAboveL != null) {
                            mUploadCallbackAboveL.onReceiveValue(null);
                            mUploadCallbackAboveL = null;
                        }
                        if (mUploadMessage != null) {
                            mUploadMessage.onReceiveValue(null);
                            mUploadMessage = null;
                        }
                        dialog.dismiss();
                    }
                })
                .cancelable(false)
                .canceledOnTouchOutside(false)
                .itemsCallback(new MaterialDialog.ListCallback() {
                    @Override
                    public void onSelection(MaterialDialog dialog, View itemView, int position, CharSequence text) {
                        if (position == 0) {
                            takeCamera();
                        } else if (position == 1) {
                            takePhoto();
                        }
                    }
                }).show();
    }

 //拍照
    private void takeCamera() {
        Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);


        cameraFielPath = Environment.getExternalStorageDirectory() + "//" + System.currentTimeMillis() + ".jpg";
        File outputImage = new File(cameraFielPath);
        intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(outputImage));
        startActivityForResult(intent, FILE_CAMERA_RESULT_CODE);
    }


    //选择图片
    private void takePhoto() {
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);
        i.addCategory(Intent.CATEGORY_OPENABLE);
        i.setType("image/*");
        startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_RESULT_CODE);
    }


    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        //  super.onActivityResult(requestCode, resultCode, resultData);
        if (null == mUploadMessage && null == mUploadCallbackAboveL) return;
        if (resultCode != RESULT_OK) {//同上所说需要回调onReceiveValue方法防止下次无法响应js方法
            if (mUploadCallbackAboveL != null) {
                mUploadCallbackAboveL.onReceiveValue(null);
                mUploadCallbackAboveL = null;
            }
            if (mUploadMessage != null) {
                mUploadMessage.onReceiveValue(null);
                mUploadMessage = null;
            }
            return;
        }
        Uri result = null;
        if (requestCode == FILE_CAMERA_RESULT_CODE) {
            if (null != data && null != data.getData()) {
                result = data.getData();
            }
            if (result == null && hasFile(cameraFielPath)) {
                result = Uri.fromFile(new File(cameraFielPath));
            }
            if (mUploadCallbackAboveL != null) {
                mUploadCallbackAboveL.onReceiveValue(new Uri[]{result});
                mUploadCallbackAboveL = null;
            } else if (mUploadMessage != null) {
                mUploadMessage.onReceiveValue(result);
                mUploadMessage = null;
            }
        } else if (requestCode == FILE_CHOOSER_RESULT_CODE) {
            if (data != null) {
                result = data.getData();
            }
            if (mUploadCallbackAboveL != null) {
                onActivityResultAboveL(data);
            } else if (mUploadMessage != null) {
                mUploadMessage.onReceiveValue(result);
                mUploadMessage = null;
            }
        }
    }


    /**
     * 判断文件是否存在
     */
    public static boolean hasFile(String path) {
        try {
            File f = new File(path);
            if (!f.exists()) {
                return false;
            }
        } catch (Exception e) {
            Log.i("error", e.toString());
            return false;
        }
        return true;
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void onActivityResultAboveL(Intent intent) {
        Uri[] results = null;
        if (intent != null) {
            String dataString = intent.getDataString();
            ClipData clipData = intent.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)};
        }
        mUploadCallbackAboveL.onReceiveValue(results);
        mUploadCallbackAboveL = null;
    }

如果是android7.0 ，需要在 onCreate方法中加入 如下代码

StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
        StrictMode.setVmPolicy(builder.build());
        builder.detectFileUriExposure();

才可以调用相机。

三.效果

这里写图片描述

这里写图片描述
这里写图片描述

四.参考

https://blog.csdn.net/aicfeng_liuy/article/details/52535642
https://blog.csdn.net/qq_23179075/article/details/70314473
https://www.jianshu.com/p/13f4b8f70947

五.Demo下载

https://download.csdn.net/download/a748448660/10645776

追风筝的摆渡人
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
android studio中新建assets,用webview加载本地图片
希望永有一颗童心
07-05 3994
xml文件中创建webview<WebView android:id="@+id/wv_explain" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerInParent="true"
Android中Webview显示全屏拉伸图片
ch_majia的博客
06-17 1005
需要在一个视频view上叠加一个webview显示一些第三方的内容，例如视频、图片、h5页面等。显示图片时出现了边框和滚动条等不在预期的内容。犹豫对html
Android WebView中显示一张或多张图片
weixin_30551947的博客
10-31 285
最近需要在平板中显示多张图片，调查了下，决定用WebView(说实话，我还不清楚有没有其他android控件能够显示多张图片的。。。。。), 主要是用HTML的img来显示多张图片。 google百度一通后，实现了多张图片的显示，出来的效果还错。 还是自己总结一下，看别人东一点，西一点的博客还是比较费解（有时候我真的是很反感看这些博客，东抄一点，西抄一点，到最后也没说问题怎么解决的。。。。。）...
2024年安卓最新Android相册选择图片、相机拍照上传功能实现（上），2024年最新面试经历分享
最新发布
2401_84520457的博客
05-16 837
我一直以来都有整理练习大厂面试题的习惯，有随时跳出舒服圈的准备，也许求职者已经很满意现在的工作，薪酬，觉得习惯而且安逸。不过如果公司突然倒闭，或者部门被裁减，还能找到这样或者更好的工作吗？我建议各位，多刷刷面试题，知道最新的技术，每三个月可以去面试一两家公司，因为你已经有不错的工作了，所以可以带着轻松的心态去面试，同时也可以增加面试的经验。我可以将最近整理的一线互联网公司面试真题+解析分享给大家，大概花了三个月的时间整理2246页，帮助大家学习进步。
Android WebView相册选取图片及集成(X5内核,crosswalk)
Te_small的博客
12-22 2205
webview加载商城连接地址，系统webview的加载商城里的一个分类页面卡顿，其余页面正常。 自己写webview显然不现实，继承系统的写出来效果还是如此，然后就集成了腾讯X5的内核。 TBS(腾讯浏览服务)的优势 速度快：相比系统webview的网页打开速度有30+%的提升； 省流量：使用云端优化技术使流量节省20+%； 更安全：安全问题可以在24小时内修复； 更稳定：...
android Webview（H5）中调用相册和拍照
08-15
本文将详细讲解如何在Android的Webview中调用相册和拍照功能，以实现H5与原生Android应用的深度集成。 首先，我们需要了解`WebView`的基本用法。`WebView`是Android SDK中的一个类，它可以加载URL，展示HTML页面，...
Android webview打开相册选择图片并上传到服务器，（亲测可用）
04-25
在Android应用开发中，WebView是一个非常重要的组件，它允许开发者在应用内展示网页内容，甚至与网页进行交互。本文将详细讲解如何在Android的WebView中实现打开本地相册选择图片，并将其上传到服务器的功能。 首先...
android webview 选择文件（拍照，本地相册) 百度定位自适应屏幕
08-13
在Android Webview中实现文件选择，包括拍照和从相册选取图片，需要监听`WebChromeClient`并处理文件选择器的结果。同时，结合百度定位服务，可以提供实时的位置信息，使得应用更具交互性和实用性。最后，通过适配...
Android WebView中调用相机拍照、相册、录制视频
06-13
本人之前有类似功能的资源，但是系统定的下载积分太高，导致很多的Android开发者都在说我骗积分，我已将之前的资源给隐藏了，重新上传一份更加优质的资源，功能更加强大，如果觉得还OK的话，记得给个好评哦。
android webview拍照,让 Android 的 WebView 支持 type 为 file 的 input，同时支持拍照
weixin_39585070的博客
05-26 461
Android 的 WebView 组件默认是不启用 type 为 file 的 input 的，需要在代码中做一些类似 hack 的编码(因为解决问题的目标对象的方法都是加了@hide注解的)才能召唤神龙。目标对象：WebChromeClient实例化一个目标对象，并重写它的几个隐藏方法(针对不同的Android系统版本，方法名和入参都不一样，所以方法有多个)，然后将目标对象作为参数传递给 We...
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)这个方法给写出来，代码如下：
webView选择图片并上传
08-19
android 使用webView选择图片并上传，相关联的服务器代码地址：http://download.csdn.net/detail/vipa1888/5975311
Android开发WebView获取SD卡图片并显示
03-31
webview可以获取SD卡图片并显示，且完美解决Android4.4以后webview无法访问SD卡图片的问题。
android webview拍照,在android 2.2/2.3中使用webview从camera中照相并且上传的实现
weixin_39922929的博客
05-26 108
最近做了需要实现一个小功能，在安卓的离线数据录入程序中，要支持文件的的上传。简单而言，就是在一个webview包装起来的离线的WebApp中，通过input[type=file]的指定需要上传的文件，然后点击保存按钮的时候将数据先保存到本地(因为是离线状态)，然后当网络连通的时候再将数据和文件一起上传到服务器。由于程序主要操作界面是一个类似于phonegap封装的纯JS的WebAPP，所以基本上限...
android 关于WebView点击图片展示大图
莫爷博客
05-12 7887
最近因为项目的需要 在加载webview的时候如果有图片展示点击能够查看大图，刚开始百思不得其解，后来经过多方的努力得以实现。 这一行代码是为了重写js交互 webView.setWebViewClient(new MyWebViewClient(context, webView, layout_loding)); 能够实现这样的功能 无外乎有两步 第一能够识别JS的语言 例如上面这段J
Android 用 Webview 显示网络图片跳坑指南
龙衣
12-14 1413
主要内容 使用WebView加载网络图片 WebView加载图片的点击事件 系统的ImageView控件本就是用来显示图片的，那为什么还使用WebView控件去显示呢？ 原因有三： 我目前项目的图片大小不一，有的很大（22561080）,有的很小（3636）,在做图片适配的时候不太好实现（是我目前水平不够吧），为了能完成项目的需求，只能先实现效果先。 ImageView本身的scaleT...
Android - WebView接入H5客服&照片/视频上传
czssltt的博客
04-20 1917
webView加载H5，主要是解决上传图片和视频的问题。 1）Activity定义一些常量变量 private static final int REQUEST_CODE_PERMISSION_CAMERA = 0x03; private static final int REQUEST_CODE_CAMERA = 0x02; private static final int REQUEST_CODE_ALBUM = 0x01; private ValueCallback<U
WebView入门(三)——WebView实现拍照及选择图片
qq_31573123的博客
06-12 2909
WebView实现拍照及选择图片 在安卓开发过程中，会出现对接H5需要拍照及选择本地图片上传的需求。这个功能的实现需要调用安卓的相关操作，然后将获取到的图片路径传给H5。 1 H5部分 1.1 通过‘input’标签唤起APP执行相关操作 input 标签中type="file" 可用于文件上传，accept="image/*"表示上传的类型为Image类型，点击可通知安卓执行上传操作 &lt...
android webview拍照 并显示
10-02
在Android中，可以使用WebView拍照并显示。首先，我们需要为WebView添加一个JavaScript接口，以允许在网页中调用Android的相机功能。 首先，在Android的Activity类中，我们可以使用以下代码来实现： //启用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值