How get pixel data from nativescript Image or ImageAsset

Question

I am trying to get image data from imageAsset in native script, but I can't get pixel data from my image. How can I do that?

onCameraButtonTap(imageComponentRef: any, htmlDocRef: any): void {
    camera.takePicture().then((imageAsset) => {
        var image = new Image();
        image.src = imageAsset;
        imageComponentRef.src = imageAsset;
    }).catch((error) => {
        console.log(error);
    });
}

I mean something like this: image.getRGB(23,45), getting pixel rgb data from a coordinate.

score 0 · Answer 1 · answered Nov 11 '18 at 18:55

0

There is no plugin yet, but it seems to be a few lines of code with iOS / Android native apis.

Refer the docs to converting Objective C / Java into JavaScript.

answered Nov 11 '18 at 18:55

Manoj

21,753
3
20
41

score 0 · Accepted Answer · answered Nov 12 '18 at 04:22

For Android in NativeScript:

You need to use the android native bitmap and Color class to get the RGB.

Declare android on Top of your class e.g.

declare let android: any;

@Component({
....
{)

and add the folloing code in your takePicture function

camera.takePicture().then((imageAsset) => {
        var image = new Image();
        image.src = imageAsset;
        imageComponentRef.src = imageAsset;
        const imagePath = imageAsset.android;
        const imageAndroidDrawable = android.graphics.drawable.Drawable.createFromPath(imagePath);
            const imageAndroidBitmap = android.graphics.BitmapFactory.decodeFile(imagePath);
            const pixel = imageAndroidBitmap.getPixel(23, 45);
            const redValue =  android.graphics.Color.red(pixel);
            const blueValue = android.graphics.Color.blue(pixel);
            const greenValue = android.graphics.Color.green(pixel);
    }).catch((error) => {
        console.log(error);
    });

score 0 · Answer 3 · answered Nov 13 '18 at 07:21

You can use nativescript-bitmap-factory to get a pixel from bitmap object

var BitmapFactory = require("nativescript-bitmap-factory");

var colorSelected;

var bmp = BitmapFactory.asBitmap(imageAsset);

bmp.dispose(() => function {

     colorSelected = bmp.getPoint(23,45);

})

How get pixel data from nativescript Image or ImageAsset

3 Answers3