Android和js交互，选择照片

最新推荐文章于 2024-07-24 11:23:56 发布

小强_程序猿_

最新推荐文章于 2024-07-24 11:23:56 发布

阅读量1.7k

点赞数 2

分类专栏： android 文章标签： android webview html

本文链接：https://blog.csdn.net/u014389362/article/details/52190883

版权

android 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

Android和js交互，选择照片

android 的webview和js相互调用

1.html代码

html中有个img标签，用来显示图片

<!DOCTYPE html >
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>选择图片</title>

        <script type="text/javascript">
            //给img设置图片，此方法供Android端调用
            function setImg(path){
                document.getElementById("img").src=path;
            }
        </script>
    </head>
    <body>
        <!--调用Android的selectImg方法-->
        <img width="100px"    id="img" onclick="javascript:Android.selectImg()" alt="选择头像">
    </body>
</html>

2.java代码

初始化webview

    public class MainActivity extends AppCompatActivity {
    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    @SuppressLint("JavascriptInterface")
    private void initView() {
        webView = (WebView) findViewById(R.id.webView);//绑定webview控件
        WebSettings settings = webView.getSettings();//拿到webview的设置器
        settings.setJavaScriptEnabled(true);//启用js功能
        //设置交互的接口，给h5调用，"Android"相当于命名空间吧，
        //与这里对应 onclick="javascript:Android.selectImg()"
        webView.addJavascriptInterface(new AndroidCall(this), "Android"); 
        webView.setWebChromeClient(new WebChromeClient(){
        });//setWebChromeClient辅助WebView处理JavaScript的对话框，网站图标，网站title，加载进度等
        webView.loadUrl("file:///android_asset/show.html");//加载前端网页
    }


    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (data == null) return;
        String path = selectImage(this, data);
        //调用js的setImg函数，把地址传递过去
        webView.loadUrl("javascript:setImg('"+path+"')");
    }
    //获取本地图片的路径
    public static String selectImage(Context context, Intent data){
        Uri selectedImage = data.getData();
        if(selectedImage!=null){
            String uriStr=selectedImage.toString();
            String path=uriStr.substring(10,uriStr.length());
            if(path.startsWith("com.sec.android.gallery3d")){
                return null;
            }
        }
        String[] filePathColumn = { MediaStore.Images.Media.DATA };
        Cursor cursor = context.getContentResolver().query(selectedImage,filePathColumn, null, null, null);
        cursor.moveToFirst();
        int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
        String picturePath = cursor.getString(columnIndex);
        cursor.close();
        return picturePath;
    }

}

AndroidCall.java

package com.example.testjavascript;

import android.content.Context;
import android.content.Intent;
import android.webkit.JavascriptInterface;

/**
 * Created by 光头强 on 2016/8/12 0012.
 */
public class AndroidCall {
    public static final int SELECT_PIC_KITKAT = 1;
    public static final int SELECT_PIC = 2;
    private Context context;

    public AndroidCall(Context context) {
        this.context = context;
    }

    /**
     * 打开图库选择图片
     * 此方法供js调用
     */
    @JavascriptInterface
    public void selectImg(){
        Intent intent=new Intent(Intent.ACTION_GET_CONTENT);//ACTION_OPEN_DOCUMENT
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("image/jpeg");
        if(android.os.Build.VERSION.SDK_INT>=android.os.Build.VERSION_CODES.KITKAT){
            ((MainActivity)context).startActivityForResult(intent, SELECT_PIC_KITKAT);
        }else{
            ((MainActivity)context).startActivityForResult(intent, SELECT_PIC);
        }
    }
}