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中JavaScript/TypeScript调用原生代码

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

关于Android的Cordova插件plugin OnActivityResult无效的问题

在写Anrdoid Cordova的时候没有过多的去了解Cordova,以为和源生Android差不多,自然而然就遇到了一些奇怪的问题 这篇文章是关于CordovaPlugin中 使用startAct...

cordova + ionic 使用中碰到的一些问题

1、No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist ...

使用TypeScript开发ReactNative应用的简单示例

最近小小尝试了下 ReactNative + TypeScript 开发APP,爬了无数坑之后总算弄出来个结果,重要的地方记录下,后面会附上示例代码: 开发工具的选择 windows 平台我接触的开...

iOS下JS与OC互相调用(八)--Cordova详解+实战

扯两句,可以跳过由于项目中Cordova相关功能一直是同事在负责,所以也没有仔细的去探究Cordova到底是怎么使用的,又是如何实现JS 与 OC 的交互。所以我基本上是从零开始研究和学习Cordov...

编写自定义cordova插件(JS)

在ionic项目中需要调用第三方应用时,需要自己编写自定义cordova插件来满足,本篇文章就介绍cordova插件的编写方法,以及在ionic应用的调用的方式。一、编写JS插件仅提供Javascri...
  • lissdy
  • lissdy
  • 2015年06月05日 16:54
  • 7453

如何在原生工程中引入Cordova工程

如今混合开发方兴未艾,有的项目可能一开始是原生开发的,后期需要加入混合开发,如将Cordova工程引进到原生工程中。那么该如何操作呢?下面就来描述一下步骤。 1、首先我们来创建一个Cordova工程,...

cordova 插件中原生调用js

最近搞了个本地推送的cordova插件,里面有这么个需求,在点击推送的本地消息时需要给混合的那边通知下,然后调用某个JS中的方法。首先我们要知道想要实现原生调用js,那么一定要借助原生中的webvie...

Cordova自定义插件实战

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

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

自定义插件步骤: 1,
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cordova通过原生实现自定义功能
举报原因:
原因补充:

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