Android与js交互上传图片

最新推荐文章于 2022-11-09 14:17:41 发布

洄游鱼lu

最新推荐文章于 2022-11-09 14:17:41 发布

阅读量1.9k

点赞数

分类专栏： Android 文章标签： android 图片 javascript

本文链接：https://blog.csdn.net/u013253709/article/details/76974265

版权

Android 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一步：获取网络权限，读写文件权限

<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

第二步：加载本地写好的html文件（定义好js提供给Android的调用方法jsCallAndroid()和安卓提供给js的调用接口upload()）放在assets目录下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
text-align: center;
}
.one{
border: 3px solid blue;
}
.two{
border: 3px solid transparent;
}
</style>
</head>
<body>
<img id="photo" class="one" src="img/image3.png" width="300" height="300"/><br>
<button id="btn_jscallandroid" onclick="jsCallAndroid()">点击上传</button>

<script type="text/javascript">

    function jsCallAndroid(){
        var str="点击上传";
        /*objName就是在android客户端通过代码注入的java对象*/
        objName.upload();
    }

    function setImag(path){
        document.getElementById("photo").src=""+path
    }

    function androidCallJsAddBorder(){
        document.getElementById("photo").className="one";
    }

    function androidCallJsRemoveBorder(){
        document.getElementById("photo").className="two";
    }
</script>
</body>
</html>

第三步：Android部分代码：

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;
    private Button mBtnAddBorder;
    private Button mBtnRemoveBorder;
    private SweetAlertDialog dialog;

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

    /**
    * 初始化UI
    */
    private void initViews() {
        mWebView = (WebView) findViewById(R.id.webview);
        mBtnAddBorder = (Button) findViewById(R.id.btn_addborder);
        mBtnRemoveBorder = (Button) findViewById(R.id.btn_removeborder);
    }

    private void initData() {
        WebSettings settings = mWebView.getSettings();
        //设置编码
        settings.setDefaultTextEncodingName("utf-8");
        //支持js
        settings.setJavaScriptEnabled(true);
        settings.setBlockNetworkImage(false);
        //设置本地调用对象及其接口
        mWebView.loadUrl("file:///android_asset/html/webview2js.html");
        //第二个参数相当于对象名，要和js中保持一致
        mWebView.addJavascriptInterface(new Test(), "objName");
    }

    private void initListener() {
        //调用js方法给图片移除边框
        mBtnRemoveBorder.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebView.loadUrl("javascript: androidCallJsRemoveBorder()");
            }
        });

        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl("file:///android_asset/html/webview2js.html");
                return true;
            }
        });

        //调用js方法给图片增加边框
        mBtnAddBorder.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //调用无参方法 假如有参的话 例如传一个字符串 
                 //需要在括号中用单引号把要传的字符串引起来 整型变量 直接写即可
                mWebView.loadUrl("javascript: androidCallJsAddBorder()");
            }
        });
    }


    class Test {
        /**
        * 这里需要注意的是，在Android4.2.2及之后的版本只有带有
        * JavascriptInterface注释的public方法才能够被js访问。
        * 所以要在show()方法前加：@JavascriptInterface
        */
        @JavascriptInterface
        public void upload() {
            dialog = new SweetAlertDialog(MainActivity.this);
            dialog.setCanceledOnTouchOutside(true);
            dialog.setTitleText("请选择获取头像方式！")
               .setCancelText("打开相册")
               .setConfirmText("打开相机")
               .setCancelClickListener(new SweetAlertDialog.OnSweetClickListener() {
                   @Override
                   public void onClick(SweetAlertDialog sweetAlertDialog) {
                       //打开相册
                       openAlbum();
                   }
               })
               .setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() {
                   @Override
                   public void onClick(SweetAlertDialog sweetAlertDialog) {
                       //打开相机
                       openCamera();
                   }
               }).show();
        }
    }

    /**
    * 打开相册
    */
    private void openAlbum() {
        Intent mIntent = new Intent(Intent.ACTION_PICK);
        //mIntent.addCategory(Intent.CATEGORY_OPENABLE);
        mIntent.setType("image/*");
        startActivityForResult(mIntent, 1);
        dialog.dismiss();
    }

    /**
    * 打开相机
    */
    private void openCamera() {
        //拍照上传
        Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        //下面这句指定调用相机拍照后的照片存储的路径
        if (SDCardUtils.getInstance().ExistSDCard()) {
            File tempFile = new File(Environment.getExternalStorageDirectory()
            + "/androidtojs/" + "photo.jpg");
            if (!tempFile.exists()) {
                tempFile.getParentFile().mkdirs();
            }
            // 从文件中创建uri
            Uri uri = Uri.fromFile(tempFile);
            intent.putExtra(MediaStore.EXTRA_OUTPUT, uri);
        }
        startActivityForResult(intent, 2);
        dialog.dismiss();
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        switch (requestCode) {
            case 1: //打开相册返回
            try {
                if (data != null) {
                    Uri uri = data.getData(); // 返回的是一个Uri
                    if (uri != null) {
                        String path = UriUtils.getInstance()
                           .getPath(MainActivity.this, uri);
                        if (path == null || path.equals("")) {
                            Toast.makeText(MainActivity.this, "没找到图片
                               ,请拍照",Toast.LENGTH_SHORT).show();
                            return;
                        }
                        File s = new File(path);
                        if (s.exists()) {
                            Toast.makeText(MainActivity.this, path, 
                               Toast.LENGTH_SHORT).show();
                            mWebView.loadUrl
                               ("javascript:setImag('" + path + "')");
                        } else {
                            Toast.makeText(MainActivity.this,  "没找到图片,
                                请拍照",Toast.LENGTH_SHORT).show();
                        }
                    }
                } else {
                    Toast.makeText(MainActivity.this, "没找到图片
                       ,请拍照", Toast.LENGTH_SHORT).show();
                }
            } catch (Exception e) {
            }
            break;
          case 2: //打开相机返回
            if (resultCode == RESULT_OK) {
                //处理拍照
                if (SDCardUtils.getInstance().ExistSDCard()) {
                    File temp = new File(Environment.getExternalStorageDirectory()
                       + "/androidtojs/" + "photo.jpg");
                    if (!temp.exists()) {
                        temp.getParentFile().mkdirs();
                    }
                    String path = temp.getPath();
                    mWebView.loadUrl("javascript:setImag('" + path + "')");
                } else {
                    Toast.makeText(MainActivity.this, "未找到存储卡，
                       无法存储照片！", Toast.LENGTH_SHORT).show();
                }
            }
            break;
        }
    }
}