现在的位置: 首页 > 综合 > 正文

Android上 用Html5做界面,javascript调用摄像头实例

2011年12月10日 ⁄ 综合 ⁄ 共 2611字 ⁄ 字号 评论关闭

Android开发时候,界面制作基本会耗去大半部分时间,而且只能开发人员自己制作,所以一直想借用HTML5+CSS3完成,PhoneGap还不太成熟,自己准备用Android原生+WebView完成,发现和Flash As做互调差不多。以下代码是通过HTML的javascript调用原生接口,完成照片选取的代码,点击图像,将选择图片(从相机或者摄像头)。照片选取代码见上一篇文章 《Android 拍照加剪切处理方式

Activity代码:

import sh.path.R;
import sh.path.ui.image.ImageCrop;
import android.app.Activity;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.Window;
import android.webkit.WebView;
import android.widget.Toast;

public class HTMLFeedHomeActivity extends Activity {
    private ImageCrop photoUtil;
    private WebView webView = null;
    private Handler mHandler = new Handler();
    private String mJsData = null;
    private Activity activityThis = this;

    @Override
    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.htmlfeeds);
        setupWebView();
        photoUtil = new ImageCrop(this);
        this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

    }

    private void setupWebView() {

        webView = (WebView) findViewById(R.id.idhtmlfeedhome);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        webView.loadUrl("file:///android_asset/path/index.html");
        webView.addJavascriptInterface(new JavaScriptInterface(), "caller");
    }
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        try{
            if(photoUtil.capituredImage(requestCode, resultCode, data)){
                if(ImageCrop.CROP_IMAGE ==requestCode){
                    //mImageView.setImageURI(photoUtil.getImageCaptureUriCutted());
                    webView.loadUrl("javascript:setPhoto('"+mJsData+"','"+photoUtil.getImageCaptureUriCutted().getPath()+"')");
                }
                return;
            }
        }catch(Exception exp){
            exp.printStackTrace();
        }
    }
   
    private class JavaScriptInterface{
        @SuppressWarnings("unused")
        public void clickOnAndroid() {
            mHandler.post(new Runnable() {
                public void run() {
                    webView.loadUrl("javascript:wave()");
                }
            });
        }
        @SuppressWarnings("unused")
        public void takePhoto(String jsData){
            mJsData = jsData;
            photoUtil.getDialog().show();
        }
        @SuppressWarnings("unused")
        public void showTip(String tip){
            Toast.makeText(activityThis, tip, Toast.LENGTH_SHORT).show();  
        }
    }
}

详见 《用Html5做界面,javascript调用摄像头实例

抱歉!评论已关闭.