H5前端呼叫Android拍照功能
阿新 • • 發佈：2019-02-17
JS呼叫Android攝像頭拍照
產品經理要求H5要實現直接呼叫原生攝像頭完成拍照功能：
一開始也是糊塗，我們前端的哥們總說用JS可以直接呼叫，不用Android的Java程式碼，所以我一開始也信了，想了想不是那麼回事，可以呼叫也是通過原生封裝好的。
下面寫程式碼。先上JS的
說明：
1. JS含有和Android的互動，呼叫攝像頭的方法和接收Android傳遞過來的照片資訊
2.對照片資訊的處理(Base64的處理)（JS是自己寫的，H5寫的有點low見諒）
<!DOCTYPE html>
<html lang="en">
<head 下面是Android端的程式碼
說明：
1.含有拍照邏輯
2.對照片的處理，加密和處理旋轉問題(三星拍照的照片被旋轉，其他不知道)
3.照片的bitmap太大的話需要處理壓縮，以免出現OOM，這樣JS端會顯示不出來，這裡只是簡單的處理了一下，有需要的話根據需要去動態處理。
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private WebView webView;
private JavaScriptMethods mJsMethods;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
webView = (WebView) findViewById(R.id.webview);
initWebView();
}
private void initWebView() {
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
// 支援縮放
initListener();
mJsMethods = new JavaScriptMethods(MainActivity.this, this, webView);
webView.addJavascriptInterface(mJsMethods, JavaScriptMethods.JSINTERFACE);
webView.loadUrl("file:///android_asset/H5.html");
}
private void initListener() {
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
@Override
public void onProgressChanged(WebView view, final int newProgress) {
super.onProgressChanged(view, newProgress);
}
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
}
});
webView.setWebViewClient(new WebViewClient() {
@Nullable
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
return super.shouldInterceptRequest(view, request);
}
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
//6.0以下
}
@RequiresApi(api = Build.VERSION_CODES.M)
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
}
@Override
public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
super.onReceivedHttpError(view, request, errorResponse);
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
});
}
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (resultCode == RESULT_OK && requestCode == JavaScriptMethods.TAKE_PHOTO) {
Log.d(TAG, "拍到圖片");
//儲存照片顯示在H5介面
//獲取照片的旋轉角度，三星的拍照後旋轉了90度
int bitmapDegree = getBitmapDegree(mJsMethods.filePath);
Log.d("照片的旋轉:", "" + bitmapDegree);
Uri uri = Uri.fromFile(new File(mJsMethods.filePath));
try {
BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.RGB_565;
//引數可調，值越大圖片大小越小
options.inSampleSize = 4;
Bitmap takePhotoBitmap = BitmapFactory.decodeStream(getContentResolver().openInputStream(uri), null, options);
//糾正旋轉角度
Bitmap rotateBitmapByDegreebitmap = rotateBitmapByDegree(takePhotoBitmap, bitmapDegree);
//轉64並加密，加密是因為給H5 傳遞json的時候會有回車換行，加密後消除，但是要在H5端做解密操作，
// 併除去回車換行符，在Android端做也是一樣的
String base64ImgStr = Base64Util.bitmapToBase64(rotateBitmapByDegreebitmap);
String base64EncodeImgStr = Base64Util.encode(base64ImgStr);
JSONObject json = new JSONObject();
json.put("base64EncodeImgStr", base64EncodeImgStr);
String url = "javascript:receiveBase64StrData(" + json.toString() + ")";
webView.loadUrl(url);
takePhotoBitmap.recycle();
rotateBitmapByDegreebitmap.recycle();
} catch (FileNotFoundException | JSONException e) {
e.printStackTrace();
}
}
}
/**
* 讀取圖片的旋轉的角度
*
* @param path 圖片絕對路徑
* @return 圖片的旋轉角度
*/
private int getBitmapDegree(String path) {
int degree = 0;
try {
// 從指定路徑下讀取圖片，並獲取其EXIF資訊
ExifInterface exifInterface = new ExifInterface(path);
// 獲取圖片的旋轉資訊
int orientation = exifInterface.getAttributeInt(ExifInterface.TAG_ORIENTATION,
ExifInterface.ORIENTATION_NORMAL);
switch (orientation) {
case ExifInterface.ORIENTATION_ROTATE_90:
degree = 90;
break;
case ExifInterface.ORIENTATION_ROTATE_180:
degree = 180;
break;
case ExifInterface.ORIENTATION_ROTATE_270:
degree = 270;
break;
default:
break;
}
} catch (IOException e) {
e.printStackTrace();
}
return degree;
}
/**
* 將圖片按照某個角度進行旋轉
*
* @param bm 需要旋轉的圖片
* @param degree 旋轉角度
* @return 旋轉後的圖片
*/
public Bitmap rotateBitmapByDegree(Bitmap bm, int degree) {
Bitmap returnBm = null;
// 根據旋轉角度，生成旋轉矩陣
Matrix matrix = new Matrix();
matrix.postRotate(degree);
try {
// 將原始圖片按照旋轉矩陣進行旋轉，並得到新的圖片
returnBm = Bitmap.createBitmap(bm, 0, 0, bm.getWidth(), bm.getHeight(), matrix, true);
} catch (OutOfMemoryError e) {
Log.d("記憶體溢位", "");
}
if (returnBm == null) {
returnBm = bm;
}
if (bm != returnBm) {
bm.recycle();
}
return returnBm;
}
}JS和Android的橋樑搭建
這裡就不多說了不會呼叫的去百度，網上很多。
/**
* JS和Android互調的橋樑
*/
public class JavaScriptMethods {
public static String JSINTERFACE = "jsInterface";
private Activity mActivity;
private WebView mWebView;
private Context mContext;
public static final int TAKE_PHOTO = 1000;
public JavaScriptMethods(Activity activity, Context context, WebView webView) {
mActivity = activity;
mWebView = webView;
mContext = context;
}
public String filePath = Environment.getExternalStorageDirectory() + File.separator + "myH5camera" + File.separator + "aaa.jpg";
@JavascriptInterface
public void takePhoto() {
// 呼叫系統攝像頭
Log.d("呼叫前置攝像頭：","");
startCamera(TAKE_PHOTO, filePath);
}
private void startCamera(int type, String imgName) {
File filePath = new File(imgName);
try {
if (!filePath.exists()) {
filePath.getParentFile().mkdirs();
}
} catch (Exception e) {
e.printStackTrace();
}
Uri imageUri;
/**
* android7.0及以上
*/
if (Build.VERSION.SDK_INT >= 24) {
imageUri = FileProvider.getUriForFile(mContext, mActivity.getPackageName() + ".provider", filePath);
} else {
imageUri = Uri.fromFile(filePath);
}
//啟動相機程式
Intent intent = new Intent("android.media.action.IMAGE_CAPTURE");
intent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
mActivity.startActivityForResult(intent, type);
}
}最後
給你們提供最喜歡的原始碼：
點選下載