Menu
I'm trying to recreate functionality which is similar to this: 
using Ionic.
The screenshot demonstrates an inner circle on a live camera preview which grabs the colour along with an outer circle which shows the colour of the pixel currently being looked at.
I have the live camera preview working with overlays however I don't know where to begin with grabbing a colour from a particular spot on the screen.
I understand you can take a photo and grab the colours that way but that isn't the functionality I was after, I was looking at something which allows me to see the results in real-time.
Can this functionality be achieved? If so, how can I do this?
737
asked Oct 21 '17 14:10
Then, create a new class that uses these CSS variables. The class must be written in the format .ion-color- {COLOR} where {COLOR} is the name of the color to add: After the class is added, the color can be used on any Ionic component that supports the color property.
If you need more control over the image capturing dialog inside your Ionic app, you need a different plugin since the standard camera plugin doesn’t allow any customisation. In this Quick Win we will use the Capacitor camera-preview plugin to create out own custom overlay above the image capturing dialog.
Each color is actually a collection of multiple properties, including a shade and tint, used throughout Ionic. A color can be applied to an Ionic component in order to change the default colors using the color attribute. Notice in the buttons below that the text and background changes based on the color set.
You can use : pixel value = image.at<unsigned char=""> (cv::Point (x,y)) ; channel1_value = image.at<vec3b> (cv::Point (x, y)) [0] ;
Can this functionality be achieved? If so, how can I do this?
I faced similar situation in my Application so thought it will be helpful.
I was creating a Cordova-Angular Hybrid app for real time image processing:
Open the front camera and show the different objects in-front of camera.
If object found in the dictionary then display the success message and stop previewing.
Here were the Steps:
Created new Cordova plugin that start the camera in previewMode. For getting the current image of the preview you need to override the onPreviewFrame method.
Get the buffer the image and convert it and Match it.
Based on success/fail call the callBack Method.
Now I think in your case Step-1 will be same with some additional Steps.
Create new Cordova plugin that will start the camera in previewMode. For getting the current image of the preview you need to override the onPreviewFrame method.
Override the onTouchEvent method to calculate the point inside the ImageView and in same time calculate the pixel of the frame inside onPreviewFrame method.
After getting the result just update the view with result.
Also I think the main part in this ionic app is still native.Cordova will just do the bridging.
References:
http://topandroidphones1.blogspot.com/2012/04/get-color-on-specified-location-from.html
OnPreviewFrame data image to imageView
Get the touch position inside the imageview in android
How to Get Pixel Color in Android
Capturing the Camera Preview with a PreviewCallback
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
