Android Webview调相机拍照选择图片并显示到网页

前面几篇博客我们介绍了webView的基本使用和js与Android的相互调用,并且简单的封装了个X5WebView.

本篇博客我们通过前面的知识整合来实现一个比较实用的功能.就是点击网页上的img标签选择手机里的图片或拍照,然后将图片显示在网页对应的元素上.

大概就是这个样子吧.

下面是实现步骤:
我们从零开始!

1.创建项目
我的项目名字叫做HybridApp_SelectAndShowImg.不要问我为什么起这么长的名字,因为越长越专业.

这是创建好的项目,只有一个MainActivity

2.分析需求
1)首先,我需要有个网页,这个网页很简单,就是放了一些img标签,然后给img标签添加个点击事件,点击后去调用Android提供的方法去拍照或者选择照片.得到android传过来的图片路径后去显示图片即可.

好,那我们就先写个简单的网页.对前端不是太熟悉的同学可以看看我web前端专栏里面的前面几篇文章.顺便记得顶一下呦!
web前端基础

前端代码:

html很简单,引入了jquery,index.js和index.css

	
		
		
		
		
		
	
	
		

			
我是网页
			
			
			
			
		
	

index.js代码定义了两个方法:

	var imgDom;
	$(function() {

		/*点击事件*/
		$("img").on("click", function() {
			console.log("点击调android拍照");
			imgDom = this; //将当前点击的img标签赋给变量imgDom
			console.log("当前节点:" + imgDom);
			window.android.takePhoto();

		});

	});

	/*显示图片*/
	function displayImg(path) {
		console.log("显示图片");
		$(imgDom).attr("src", "file://" + path);

	}

index.css代码:

.content {
	width: 100%;
	margin: auto;
}

h1 {
	width: 150px;
	margin: auto;
	margin-bottom: 20px;
}

img {
	border: 1px solid pink;
	border-radius: 5px;
	width: 100px;
	height: 100px;
}

2)网页搞定后我们来看看Android这边需要什么东西,首先我需要用webView加载网页,然后需要拍照和选择图片,最后把得到的图片路径回传给网页即可.

webView方面用的还是上一篇博客我们简单封装的X5ProgressWebView.
图片选择器用的而是一个第三方的开源库**ImagePicker**
和谷歌的glide.

我们主要是看看MainActivity里的代码,其实代码很少,只是给前端提供了一个takephoto方法,然后得到图片路径后去调用js提供的 displayImg(path)方法,并将路径传过去就可以了.

package com.yzq.hybridapp_selectandshowimg.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.JavascriptInterface;

import com.lzy.imagepicker.ImagePicker;
import com.lzy.imagepicker.bean.ImageItem;
import com.yzq.hybridapp_selectandshowimg.R;
import com.yzq.hybridapp_selectandshowimg.Tool.MyImagePicker;
import com.yzq.hybridapp_selectandshowimg.common.Constants;
import com.yzq.hybridapp_selectandshowimg.view.ProgressWebView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {


    public final String TAG = "MainActivity";
    private ProgressWebView webView;

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

        webView = (ProgressWebView) findViewById(R.id.webView);

        webView.addJavascriptInterface(new JsInterface(), "android");
        webView.loadUrl("file:///android_asset/index.html");

    }


    /*与js进行交互的类*/
    private class JsInterface {

        @JavascriptInterface
        public void takePhoto() {
            MyImagePicker.takePhoto(MainActivity.this, 1, false);
        }
    }


    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        switch (resultCode) {
            case ImagePicker.RESULT_CODE_ITEMS:
                if (data != null && requestCode == Constants.REQUEST_CODE_TAKE_PHOTO) {
                    ArrayList images = (ArrayList) data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS);
                    String path = images.get(0).path;
                    /*将图片显示在网页上*/
                    String method = "javascript:displayImg('" + path + "')";
                    webView.loadUrl(method);

                }
                break;
        }
    }
}

ok,这样就可以了，如果你的网页是从服务器端加载的，那么显示图片的时候会发现图片显示不出来，并且会提示这个错误：
android webview Not allowed to load local resource
解决这个问题请看：http://blog.csdn.net/yuzhiqiang_1993/article/details/76228541

---

下面是本篇博客的demo
Demo

---

如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可，如果文中有什么错误的地方，还望指正，转载请注明转自喻志强的博客 ，谢谢！