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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" 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.
圖片選擇器用的而是一個第三方的開源庫
和谷歌的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<ImageItem> images = (ArrayList<ImageItem>) 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
解決這個問題請看：
下面是本篇部落格的demo
Demo