Access all OpenCV functions

[anoncodemonkey]

Hi, this projects uses binary of OpenCV i assume? If yes, how can I extend to cover most, if not all, functionalities of OpenCV as I want it to be used in my Ionic 2 app?

[a31859]

Yes it uses OpenCV.
In order to do what you want, you'll need to implement the JavaScript interface and also the native interface that would call the desired functionalities.

For example (did it in a hurry might not be correct):

This would take a base 64 image convert to gray and return an base 64 image.

The JavaScript Code:

// ...
TheOpenCVPlugin.prototype.gray = function (imageData, successCallback, errorCallback) {
  cordova.exec(successCallback, errorCallback, "TheOpenCVPlugin", "gray", [imageData]);
};
// ...

The native code (Android)

// ...
@Override
public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException {
    if(action.equals("gray")) {
        Log.i(TAG, "gray called");
        final String image = data.getString(0);
        final CallbackContext cbContext = callbackContext;
        cordova.getThreadPool().execute(new Runnable() {
            public void run() {
                String result = convertToGray(inputData);
                if(result != null) {
                    cbContext.success(result);
                } else {
                    cbContext.error("Error converting image to gray.");
                }
            }
        });
        return true;
    }
    return false;
}

private String convertToGray(String image_base64) {
    if(image_base64 != null && !image_base64.isEmpty()) {
        Mat image_pattern = new Mat();
        MatOfKeyPoint kp1 = new MatOfKeyPoint();
        Mat desc1 = new Mat();

        if(image_base64.contains("data:"))
            image_base64 = image_base64.split(",")[1];
        byte[] decodedString = Base64.decode(image_base64, Base64.DEFAULT);
        Bitmap bitmap = BitmapFactory.decodeByteArray(decodedString, 0, decodedString.length);
        Utils.bitmapToMat(bitmap, image_pattern);
        // convert to gray
        Imgproc.cvtColor(image_pattern, image_pattern, Imgproc.COLOR_BGR2GRAY);

        Utils.matToBitmap(image_pattern, bitmap);

        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();  
        bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
        byte[] byteArray = byteArrayOutputStream.toByteArray();
        String image_result = Base64.encodeToString(byteArray, Base64.DEFAULT);

        return image_result;
    } 
    return null;
}
// ...

[anoncodemonkey]

Wow @a31859 this is great! Thanks, would you consider PR to add more features so that we can use OpenCV fully with Ionic 2?

[ezartech]

Great work on this plugin.
I've been experimenting with providing broader access to opencv api for cordova in my own work. Something to keep an eye on is web assembly and projects such as https://github.com/ucisysarch/opencvjs which is a partial opencv C->JS translation. To date I've only run the tests on an iphone in safari, not a cordova app yet. But I feel its a good start to investigate further. There are other initiatives for supporting the full opencv api in the works as well.

[a31859]

@afeezaziz currently I don't have much time to help but if able I will
@ezartech thanks, will look into it in the future