关闭

Android 与JS交互 调用本地相册在Html页面显示图片

标签: androidhtmlwebview图片
10589人阅读 评论(9) 收藏 举报
分类:

Android 与JS交互浅谈

Android 与 JS 交互主要分为:

  • JS 调用Android中的方法
    • Android首先要用WebView加载Html页面
      -mWebView.getSettings().addJavascriptInterface(new DemoJavascriptInterface(), “network”);
      mWebView.loadUrl();就可实现加载Html页面,与JS建立连接。
      在JS中的代码
<body> 
<p>测试 JS调本地相册</p>
<a class = "rect" onclick="sendInfoToAndroid()">JS调用相册</a> 
<p><img id= "img" src="file:///android_asset/a.jpg"  width="100" height="100"/></p>
<script>

function sendInfoToAndroid(){
//调用Android的方法启动相册
window.network.openPhoto();
}

    </script>
</body> 
}

咱先看看上边的代码:当html中矩形被点击后它会调用sendInfoToAndroid()方法,在sendInfoToAndroid()方法中通过window.network.openPhoto();来调用Android中openPhoto()方法,这里的network对应着前边的mWebView.getSettings().addJavascriptInterface(new DemoJavascriptInterface(), “network”);中的network,它们必须保持一致;
然后就是看openPhoto()方法是怎么写了

class DemoJavascriptInterface {

        public DemoJavascriptInterface() {
            // TODO Auto-generated constructor stub

        }

        @JavascriptInterface
        public void openPhtoto() {

            // 启动本地相册
            Intent intent = new Intent(Intent.ACTION_PICK);
            intent.setType("image/*");
            startActivityForResult(intent, PHOTO);

        }

    }

这样就可以实现JS调用Android 中的方法,html打开本地的相册;
- Android 调用JS中的方法
android调用的Js更简单,
mWebView.loadUrl(“javascript:setImag(‘”+path+”’)”);这样就实现了调用JS中的setImag(path)方法,并把图片的路径传给JS,并在Html中显示图片

//android 调用JS并设置图片
function setImag(path){
document.getElementById("img").src=""+path
  }

希望和喜爱编程的同学们,共同学习,共同进步。。。

1
6
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Android与H5相机、相册笔记

公司项目中android内嵌H5页面,H5页面需要选择上传图片功能。H5的标签无法调起android照相机和图库功能,所以只能android进行处理。本人第一次做,借鉴网上诸多的代码,总结如下: ...
  • xufei5789651
  • xufei5789651
  • 2017-05-08 16:55
  • 1347

Webview之H5页面调用android的图库及文件管理

Webview之H5页面调用android的图库及文件管理
  • CJQ316210
  • CJQ316210
  • 2016-01-28 10:42
  • 5878

android webview打开本地图片上传

Webview打开本地图片选择器十分之麻烦,其在安卓系统3x 4x 5x上的行为都不同,处理也不同,所以之前差点崩溃。经过测试和完善,最终其在各个版本上都能完美工作。 直接上代码package co...
  • dsc114
  • dsc114
  • 2016-07-26 08:59
  • 1598

Webview打开本地文件、图片选择的解决方案。版本兼容问题

本文期待解决的问题:1、html中 id="input" type="file"/>   标签可以在android真机各个版本上可以调取本地文件,并获取文件信息。      第一次做的时候想到利...
  • yanchun413
  • yanchun413
  • 2016-11-08 14:13
  • 1578

android webview js交互 调取本地相册(兼容各个版本)并且上传到服务器端。

android webview  js交互,调取本地相册,并且实现上传。             首先我们要理解整个互动过程,在网页webview的的组件是 input输入框,输入类型为file,点击...
  • oAAWangWei123456789
  • oAAWangWei123456789
  • 2016-03-30 16:42
  • 1540

Html页面Js调用android本地相机和图片

Html5页面Js调用android本地相机和图片
  • huangxiaoguo1
  • huangxiaoguo1
  • 2016-11-08 17:21
  • 1197

javascript原生移动云编程11 - 如何调用手机图库中图片

用javascript在码实云平台上,可以在云里编写原生的移动应用。移动应用经常需要调用手机里图库的图片(或视频),并且把图片上传到云存储里。由于码实平台提供了全面的云服务,多媒体的上传下载就变得非常...
  • mash5
  • mash5
  • 2014-09-11 13:44
  • 1190

JS与OC互调,JS打开系统相机,JS获取iOS系统图片,iOS中JS调OC

废话不多说,直接进入正题 1.首先在在viewController中实现JavaScript代理 我直接把.m文件中的内容全部粘贴了,看注释,大家懂得 #import "ViewController....
  • Boyqicheng
  • Boyqicheng
  • 2016-08-17 16:57
  • 6298

webview打开图库并获取安卓文件图片

1,实现安卓webview 打开安卓图库并拿到文件,最后调用js实现文件上传(未实现)。 2,网页代码如下:一个简单的文件选择按钮。 HTML PUBLIC "-//W3C//DTD HTML 4....
  • chencaishengsic
  • chencaishengsic
  • 2016-03-30 16:52
  • 2595

html网页调用手机摄像头(或相册)拍照上传图片,兼容安卓和苹果

  • 2017-10-17 16:38
  • 1KB
  • 下载
    个人资料
    • 访问:23248次
    • 积分:382
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:4篇
    • 译文:1篇
    • 评论:9条
    文章分类
    最新评论