How to detect if image is all black using flutter? - image

I'm building an app that user required to send a selfie but some user just block the camera to take a picture and the result is all black, is there a way to detect if image is black?
I'm thinking of using face detection but I haven't tried it and its way to much for my simple app.

One way you can try is using palette_generator package to extract colors in the image and then computing average luminance of the image, like so.
import 'package:palette_generator/palette_generator.dart';
Future<bool> isImageBlack(ImageProvider image) async {
final double threshold = 0.2; //<-- play around with different images and set appropriate threshold
final double imageLuminance = await getAvgLuminance(image);
print(imageLuminance);
return imageLuminance < threshold;
}
Future<double> getAvgLuminance(ImageProvider image) async {
final List<Color> colors = await getImagePalette(image);
double totalLuminance = 0;
colors.forEach((color) => totalLuminance += color.computeLuminance());
return totalLuminance / colors.length;
}

Before use camera check if your app has permission for that.
For this porpouse i've recommend to use the permission handler
Few lines from official documentation
var status = await Permission.camera.status;
if (status.denied) {
// We didn't ask for permission yet or the permission has been denied before but not permanently.
}

Related

Flutter Image Compression

I wanted to do some image compression before uploading to my Firestore and ran into following thread: Flutter & Firebase: Compression before upload image
The uploading works totally fine, but I cannot recognize any compression regarding the file size... Even if I decrease the quality from 85 to 1, the file still has the same size. Same thing if I upload the image without calling the compression method at all. Here is the code snippet:
void compressImage() async {
print('starting compression');
final tempDir = await getTemporaryDirectory();
final path = tempDir.path;
int rand = new Math.Random().nextInt(10000);
Im.Image image = Im.decodeImage(file.readAsBytesSync());
Im.copyResize(image, 500);
// image.format = Im.Image.RGBA;
// Im.Image newim = Im.remapColors(image, alpha: Im.LUMINANCE);
Im.Image smallerImage = Im.copyResize(image, 500); // choose the size here, it will maintain aspect ratio
var newim2 = new File('$path/img_$rand.jpg')
..writeAsBytesSync(Im.encodeJpg(smallerImage, quality: 85));
setState(() {
file = newim2;
});
print('done');
}
Any idea what I have to change, to make the compression working?
Best regards!
you can use below plugin, same working fine without any issue, even faster and what i expected
https://github.com/btastic/flutter_native_image.git
steps and method available in above link.

XAML Image source has issues displaying a deep nested path

This is quite vexing.
I am working on an app for image management. Part of the value is the ability to store images in sub-folders based on image properties, eg. creation date.
If I store the image source in a shallow folder (app\images\img.jpg), everything works fine.
If I store the image in KnownFolders.Pictures\source\year\month\day\img.jpg, Image does not render. (Yes, that specific path won't work, I am trying to give you a sense of how the path is constructed)...
The file is actually there. The path is correct (I can open it in a browser, e.g.). The app has access to the file.
But it does not render the bitmap.
I tried to render the bitmap manually using
new BitmapImage(new Uri("KnownFolders.Pictures\source\year\month\day\img.jpg"),UriKind.Absolute))
That does not render anything. (Again, assume the path is valid and has a file at its bottom).
What Am I Missing?
The head scratcher: for GIF anims, I am using Thomas Levesque's useful component: https://github.com/XamlAnimatedGif. That one, unfortunately, does only render gifs... and it does so even when the path is the one given above. So the Standard IMAGE control does not render correctly, but Thomas's control does... infuriating.
An UWP app can't load a BitmapImage from an absolute URL to a file in a folder structure below the Pictures Library Folder.
So this won't work:
var relativePath = #"source\year\month\day\img.jpg";
var imageFile = await KnownFolders.PicturesLibrary.GetFileAsync(relativePath);
var bitmapImage = new BitmapImage(new Uri(imageFile.Path));
However, you could do this:
var relativePath= #"source\year\month\day\img.jpg";
var imageFile = await KnownFolders.PicturesLibrary.GetFileAsync(relativePath);
var bitmapImage = new BitmapImage();
using (var stream = await imageFile.OpenAsync(FileAccessMode.Read))
{
await bitmapImage.SetSourceAsync(stream);
}
So, after way too much time spent on this...
First, link to DataContextChanged of the IMAGE element. In there, parse the DataContext out. If you are using the IMAGE outside of an ItemsControl etc, this is not required...
private async void ImageView_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
{
if (sender is Image)
{
Image img = (Image)sender;
if (img.DataContext is ImageView)
{
MyViewDataContext dc = (MyViewDataContext)img.DataContext;
img.Source = await dc.bitmap();
}
}
}
And here the implementation of MyViewDataContext.bitmap() which has a property called source that yields, you guessed it, absolute paths:
public async Task<BitmapImage> MyViewDataContext.bitmap()
{
if (_bitmap == null)
{
try
{
StorageFile file = await StorageFile.GetFileFromPathAsync(source);
bool r = Windows.Storage.AccessCache.StorageApplicationPermissions.FutureAccessList.CheckAccess(file);
if (r)
{
using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
// create a new bitmap, coz the old one must be done for...
_bitmap = new BitmapImage();
// And get that bitmap sucked in from stream.
await _bitmap.SetSourceAsync(fileStream);
}
}
}
catch (Exception e)
{
_bitmap = null;
}
}
return _bitmap;
}
BitmapImage _bitmap;
I cache the resulting bitmap until I dispose of this MyViewDataContext.
I am now most concerned about memory. This one worries me:
How to dispose BitmapImage cache?
So, as a tech debt, I am going to address the potential mem leaks later, once this whole thing is on the test bench and I can take a look at its runtime behavior...
To access the folders and libraries represented by the properties of this class, specify the corresponding capabilities in your app manifest. For example, to access KnownFolders.PicturesLibrary, specify the Pictures Library capability in the app manifest.
Hope this will help
KnowFolders

How to extract text from image Android app

I am working on a feature for my Android app. I would like to read text from a picture then save that text in a database. Is using OCR the best way? Is there another way? Google suggests in its documentation that NDK should only be used if strictly necessary but what are the downfalls exactly?
Any help would be great.
you can use google vision library for convert image to text, it will give better output from image.
Add below library in build gradle:
compile 'com.google.android.gms:play-services-vision:10.0.0+'
TextRecognizer textRecognizer = new TextRecognizer.Builder(getApplicationContext()).build();
Frame imageFrame = new Frame.Builder()
.setBitmap(bitmap) // your image bitmap
.build();
String imageText = "";
SparseArray<TextBlock> textBlocks = textRecognizer.detect(imageFrame);
for (int i = 0; i < textBlocks.size(); i++) {
TextBlock textBlock = textBlocks.get(textBlocks.keyAt(i));
imageText = textBlock.getValue(); // return string
}
From this Simple example of OCRReader in Android tutorial you can read text from image and also you can scan for text using camera, using very simple code.
This library is developed using Mobile Vision Text API
For scan text from camera
OCRCapture.Builder(this)
.setUseFlash(true)
.setAutoFocus(true)
.buildWithRequestCode(CAMERA_SCAN_TEXT);
For extract text from image
String text = OCRCapture.Builder(this).getTextFromUri(pickedImage);
//You can also use getTextFromBitmap(Bitmap bitmap) or getTextFromImage(String imagePath) buplic APIs from OCRLibrary library.
Text from an image can be extracted using Firebase machine learning (ML) kit. There are two versions of the text recognition API, on-device API (free) and on-cloud API.
To use the API, first create BitMap of the image, which should be upright. Then create FirebaseVisionImage object passing the bitmap object.
FirebaseVisionImage image = FirebaseVisionImage.fromBitmap(bitmap);
Then create FirebaseVisionTextRecognizer object.
FirebaseVisionTextRecognizer textRecognizer = FirebaseVision.getInstance()
.getCloudTextRecognizer();
Then pass the FirebaseVisionImage object to processImage() method, add listeners to the resulting task and capture the extracted text in success callback method.
textRecognizer.processImage(image)
.addOnSuccessListener(new OnSuccessListener<FirebaseVisionText>() {
#Override
public void onSuccess(FirebaseVisionText firebaseVisionText) {
//process success
}
})
.addOnFailureListener(new OnFailureListener() {
#Override
public void onFailure(#NonNull Exception e) {
//process failure
}
});
For complete example which shows how to use Firebase ML text recognizer, see https://www.zoftino.com/extracting-text-from-images-android
There is a different option. You can upload your image to the server, OCR it from the server, then get the result.

Unity: Loading image from URL failed

I am loading image from script to texture from URL. It is loading successfully, but the image is not reflecting on the texture.
How can I fix this?
you should UV unwrapped your model(that you want to put your image on it as a texture) you save the uv and then import it to unity then you can apply texture to it , here is tutorial that will show you how to do it in blender
Alright, if I'm gathering from the image correctly, it looks like you're using NGUI. If so, then you don't use Mesh Renderer. It's been a little bit since I used NGUI, but you need a reference to the game object or to the UITexture component that is on the game object. So I'll provide some code samples below for both scenarios. But you don't use a mesh renderer unless you're wrapping the texture around a 3D model. If this is for the UITexture then you would attach the image on there.
Game Object Reference:
imageObject.GetComponent<UITexture>().mainTexture = textureToUse;
UITexture Reference:
uiTextureReference.mainTexture = textureToUse;
I think that is what you were looking for, otherwise you need to do unwrapping and what not.
It is very easy if you are using NGUI.
Create a UITexture.
Refer it in you class either by declaring it public variable of getting it at runtime.
Import MiniJSON class that is easily available on internet. (Do not hesitate if you failed to find MiniJSON.Json, it could be MiniJSON.Deserialize or only Json.Deseiralize)
Following is the code snippet to get Facebook Display Picture with User_API_ID
string myImageUrl = "https://graph.facebook.com/"+API_ID+"/picture?type=large&redirect=0";
WWW myImageGraphRequest = new WWW(myImageUrl);
yield return myImageGraphRequest;
if (!string.IsNullOrEmpty(myImageGraphRequest.error))
Debug.Log("Could not fetch own User Image due to: " + myImageGraphRequest.error);
else
{
var myImageData = MiniJSON.Json.Deserialize (myImageGraphRequest.text) as Dictionary<string, object>;
var myImageLinkWithData = myImageData["data"] as Dictionary<string, object>;
string myImageLink = (string)myImageLinkWithData["url"];
WWW myImageRequest = new WWW(myImageLink);
yield return myImageRequest;
if (!string.IsNullOrEmpty(myImageRequest.error))
Debug.Log("Could not get user facebook image: " + myImageRequest.error);
else
{
userDP.mainTexture = myImageRequest.texture;
}
}
userDP is your UITexture.

AForge.NET Image Color Manipulation

I discovered AForge a few days ago with a goal in mind. I wanted to be able to manipulate an image's colors. However, after trying several different methods I have not been able to find a resolution.
I looked thoroughly through the documentation they give, but it hasn't been any help to me. The specific part of the documentation I have been using is:
http://www.aforgenet.com/framework/docs/html/3aaa490f-8dbe-f179-f64b-eedd0b9d34ac.htm
The example they give:
// create filter
YCbCrLinear filter = new YCbCrLinear( );
// configure the filter
filter.InCb = new Range( -0.276f, 0.163f );
filter.InCr = new Range( -0.202f, 0.500f );
// apply the filter
filter.ApplyInPlace( image );
I replicated it for a button click event, but the 'image' portion of it wasn't specified. I converted the image inside of my picturebox to a bitmap, then referenced it in the last line thinking that it would work. But it had no affect at all.
My code is the following:
private void ColManButton_Click(object sender, EventArgs e)
{
Bitmap newimage = new Bitmap(pictureBox1.Image);
YCbCrLinear filter = new YCbCrLinear();
filter.InCb = new Range(-0.276f, 0.163f);
filter.InCr = new Range(-0.202f, 0.500f);
filter.ApplyInPlace(newimage);
}
My question essentially is, to anyone familiar or willing to help with this framework, how do I take my image and manipulate its color using AForge's YCbCrLinear Class under my button's click event?
Remember to set the picture box image after you have applied the filtering.
private void ColManButton_Click(object sender, EventArgs e)
{
Bitmap newimage = new Bitmap(pictureBox1.Image);
YCbCrLinear filter = new YCbCrLinear();
filter.InCb = new Range(-0.276f, 0.163f);
filter.InCr = new Range(-0.202f, 0.500f);
filter.ApplyInPlace(newimage);
pictureBox1.Image = newimage;
}
at the aforge website you can download the source code of a sample filter application, did you try it ?

Resources