cordova通过原生实现自定义功能

原创 2016年10月04日 13:38:15


        先闲谈说下最近的微信要出的小程序吧,感觉确实很牛逼,革命说不上吧但是也是一个新的大的机遇。不得不承认腾讯有两个相当好的平台,一个是QQ,一个是微信,毕竟人数基数大,任何新的东西都会带来相当多的机会和挑战。那个小程序好像是基于react native,也是一种混合架构。最近整理整理下混合架构的知识,有时间也好好学习去。

       好了开始正题吧。

       最近研究cordova通过原生实现自定义功能也是因为客户的一些需求吧,客户提出了要连拍的功能,而cordova自定义的接口里,代码是这样的:

  1. navigator.device.capture.captureImage(   
  2. <span style="white-space:pre">  </span>CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureImageOptions options]  
  3. );  
     
    里面有三个参数,前两个分别是代表调用成功,调用失败的回调函数,第三个是条件限制,但是只有是limit和mode的参数,分别表示的意义如下:

  1. limit: 在单个采集操作期间能够采集的图像数量最大值,必须设定为大于等于1(默认值为1)。  
  2. mode: 选定的图像模式,必须设定为capture.supportedImageModes枚举中的值。  

    如此一来,每次默认是调用了原生自带的相机,效果就和原生的这句一样:
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); 

    达不到客户的需求,于是只好想想在原生里自己写一个这样的效果。其实这个需求难度并不大,但是自己在这方便也只是一个菜鸟,于是重新好好学习了下,这里很感谢一篇博文,还是一个妹子写的,写得非常详细,地址是:
    http://blog.csdn.net/tangjiarao/article/details/48288875
    
    具体方法应该很清楚了。然后我以我自己的例子说下我的流程吧:
    1.Cordova里按钮的点击事件,主要是写好回调函数,将回调的值(相片地址)记录并写入预定地方加载展示出来:
function test(){
    var suc= function(message) {
        loadpic(message)
    };
    navigator.test.fun(0,suc);
}

function loadpic(message){
    var i, len;
    var str = '';
    var mFiles= new Array();
    mFiles= message.split(',');
    for (i = 0, len = mFiles.length; i < len; i++) {
        var path = mFiles[i];
        var array_index = fullPathArray.length ;
        fullPathArray[array_index] = path;
        str += '<li class="pic_li"><img src="'+ path +'"></li>';
    }
    // 显示拍摄的照片
    $("#largeImage").append(str);
    loadImgJs();
}
   2.在js里把设置好来回传的参数和方法。
{
        "file": "plugins/intent.js",
        "id": "org.apache.cordova.Test",
        "merges": [
        "navigator.test"
        ]
        },
cordova.define("org.apache.cordova.Test", function(require, exports, module) {

        var exec = require('cordova/exec');

        module.exports = {

        fun: function(mills,suc) {
        exec(suc, null, "IntentPlugin", "test", [mills]);
        },
        };
        });
   3.在CordovaPlugin里设置好来回传的参数和方法。
else if(action.equals("test")){
        intent=new Intent(cordova.getActivity(),TakePicActivity.class);
        }
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent intent) {

        super.onActivityResult(requestCode, resultCode, intent);
        //传递返回值 给js方法
        switch(resultCode){
            case Activity.RESULT_OK:
                Bundle b=intent.getExtras();
                String str=b.getString("hi");

                //通过PluginResult和callbackContext返回给js接口  
                PluginResult pluginResults = new PluginResult(PluginResult.Status.OK, str);
                callbackContext.sendPluginResult(pluginResults);
                pluginResults.setKeepCallback(true);
                callbackContext.success();

        }

    }
}
   4.在原生里通过surfaceview实现连拍并传回照片保存地址
public class TakePicActivity extends Activity implements SurfaceHolder.Callback{
    private static final String TAG = "TestCameraActivity";
    public static final String KEY_FILENAME = "filename";
    private ImageView iv;
    private SurfaceView sv;
    private Camera mCamera;
    private String mFileName;
    private int i=1;
    private String str="";
    private Intent mIntent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_takepic);
        iv=(ImageView)findViewById(R.id.takephoto);
        sv=(SurfaceView)findViewById(R.id.my_surfaceView);
        mIntent=this.getIntent();
        SurfaceHolder holder = sv.getHolder();
        holder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
        holder.addCallback(this); // 回调接口
        Toast.makeText(this, "正在拍摄第1张照片", Toast.LENGTH_LONG).show();

        iv.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(i<4){
                    mCamera.takePicture(mShutter, null, mJpeg);
                }
            }
        });


    }

    /* 图像数据处理还未完成时的回调函数 */
    private Camera.ShutterCallback mShutter = new Camera.ShutterCallback() {
        @Override
        public void onShutter() {
            // 一般显示进度条
        }
    };

    /* 图像数据处理完成后的回调函数 */
    @SuppressLint("SdCardPath")
    private Camera.PictureCallback mJpeg = new Camera.PictureCallback() {

        @Override
        public void onPictureTaken(byte[] data, Camera camera) {
            // 保存图片
            mFileName = UUID.randomUUID().toString() + ".jpg";
            Log.i(TAG, mFileName);
            try {
                String sdStatus = Environment.getExternalStorageState();
                String name = DateFormat.format("yyyyMMdd_hhmmss",Calendar.getInstance(Locale.CHINA)) + ".jpg";
                Bitmap oldBitmap = BitmapFactory.decodeByteArray(data, 0,
                        data.length);
                Matrix matrix = new Matrix();
                matrix.setRotate(90);
                Bitmap newBitmap = Bitmap.createBitmap(oldBitmap, 0, 0,
                        oldBitmap.getWidth(), oldBitmap.getHeight(),
                        matrix, true);
                ByteArrayOutputStream baos = new ByteArrayOutputStream();
                newBitmap.compress(Bitmap.CompressFormat.JPEG, 85, baos);
                FileOutputStream b = null;
                File file = new File("/sdcard/Image/");
                file.mkdirs();// 创建文件夹
                String fileName = "/sdcard/Image/"+name;
                str=str+fileName+",";

                try {
                    b = new FileOutputStream(fileName);
                    newBitmap.compress(Bitmap.CompressFormat.JPEG, 100, b);// 把数据写入文件
                } catch (FileNotFoundException e) {
                    e.printStackTrace();
                } finally {
                    try {
                        b.flush();
                        b.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }

            } catch (Exception e) {
                e.printStackTrace();
            }
            i++;

            try {
                if(i<4){
                    mCamera.startPreview();
                    Toast.makeText(TakePicActivity.this, "正在拍摄第"+i+"张照片", Toast.LENGTH_LONG).show();
                }else{
                    str=str.substring(0,str.length()-1);
                    mIntent.putExtra("hi", str);
                    setResult(RESULT_OK, mIntent);
                    finish();
                }
            } catch (Exception e) {
                if (mCamera != null) {
                    mCamera.release();
                    mCamera = null;
                }
            }
        }
    };

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
                               int height) {
        // SurfaceView尺寸发生改变时(首次在屏幕上显示同样会调用此方法),初始化mCamera参数,启动Camera预览

        Parameters parameters = mCamera.getParameters();// 获取mCamera的参数对象
        Size largestSize = getBestSupportedSize(parameters
                .getSupportedPreviewSizes());
        parameters.setPreviewSize(largestSize.width, largestSize.height);// 设置预览图片尺寸
        largestSize = getBestSupportedSize(parameters
                .getSupportedPictureSizes());// 设置捕捉图片尺寸
        parameters.setPictureSize(largestSize.width, largestSize.height);
        mCamera.setParameters(parameters);

        try {
            mCamera.startPreview();
        } catch (Exception e) {
            if (mCamera != null) {
                mCamera.release();
                mCamera = null;
            }
        }

    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        // SurfaceView创建时,建立Camera和SurfaceView的联系
        if (mCamera != null) {
            try {
                mCamera.setPreviewDisplay(holder);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        // SurfaceView销毁时,取消Camera预览
        if (mCamera != null) {
            mCamera.stopPreview();
        }
    }

    @SuppressLint("NewApi")
    @Override
    public void onResume() {
        super.onResume();
        // 开启相机
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.GINGERBREAD) {
            mCamera = Camera.open(0);
            // i=0 表示后置相机
        } else
            mCamera = Camera.open();
    }

    @Override
    public void onPause() {
        super.onPause();
        // 释放相机
        if (mCamera != null) {
            mCamera.release();
            mCamera = null;
        }

    }

    private Size getBestSupportedSize(List<Size> sizes) {
        // 取能适用的最大的SIZE
        Size largestSize = sizes.get(0);
        int largestArea = sizes.get(0).height * sizes.get(0).width;
        for (Size s : sizes) {
            int area = s.width * s.height;
            if (area > largestArea) {
                largestArea = area;
                largestSize = s;
            }
        }
        return largestSize;
    }
}

    如此通过原生的activity实现了自定义的效果并通过两次回调实现了数据的回传。不过感觉cordova的效果确实很一般,有时间学习下react native去。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Cordova自定义插件实战

Cordova自定义插件实战完成Toast,拨打电话,发送短信的插件编写

Cordova4.3.1 android 自定义插件(显示土司Toast)

自定义插件步骤: 1,

cordova项目多个原生界面间过场动画配置

本人ios小白,最近做混生开发(cordova + ionic + angularjs),由于对ios机制完全不理解,只能遇见一个问题解决一个问题了。 项目需要打开外部网页,但是某条的网址有判断,不允...

android中的照相机机拍照程序(含连续拍照)

最近用到了android中的照相机功能,android中实现拍照的方式有两种,一种是调用系统自带的照相机进行拍照,此种方法较为简单,因为是android本身就已经实现了的;另一种就是自己来实现一个拍照...

Android项目里集成Cordova详解

自定义cordova插件;Android studio环境下将CordovaLib作为依赖导入;自定义Cordova插件;cordova自定义java类中的一些问题;在CordovaActivity中...

cordova之自定义插件

1)html页面引入cordova.js,android项目引用cordova.jar或者加载CordovaLib 2)自定义一个类继承CordovaPlugin,例如public class MyP...

混合开发-利用Cordova插件实现HTML5 与 原生代码的连接

本人项目开发中的总结, 与大家分享

Cordova中JavaScript/TypeScript调用原生代码

Cordova官网上没有说怎么使用JS调用本地代码,但是告诉了我们如何写一个插件。 Cordova插件的根本原理就是JS和原生代码的交互。 所以抠出Cordova插件中调用本地代码的部分就可以了。 ...
  • vtming
  • vtming
  • 2017-04-12 15:03
  • 1200

原生javascrippt 自定义功能函数

1、原生JavaScript实现字符串长度截取 复制代码代码如下: function cutstr(str, len) {     var temp;     var icou...

EasyUI DataGrid使用formatter属性实现自定义功能

使用JQuery EasyUI中的DataGrid组件可以很方便的得到一个数据表格,这里将对这个数据表格做一点扩展,让它能够上下移动表格里的数据行。    1.定义数据表格:
  • xhjfor
  • xhjfor
  • 2014-06-05 16:51
  • 3620
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)