We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. Process QR code Image imported from gallery

Process QR code Image imported from gallery

Hi ,

We are having requirement where we would like to import an image (QR code pic taken from phone) from gallery and process that image to get the Result Text. 

Similar kind of requirement for UWP solution has been discussed earlier - 
https://www.syncfusion.com/forums/127029/how-can-we-read-barcode-using-syncfusion

Can we achieve this feature with this control / customisation in Xamarin Forms? 
Really appreciate your help on this. 

Regards
Pawan Shakya 

15 Replies
SL Sowmiya Loganathan Syncfusion Team February 6, 2020 02:11 PM UTC

Hi Pawan,  
 
Currently we are working on to achieve your requirement. We will update the further details on 10th February, 2020.  
 
Regards, 
Sowmiya Loganathan 


PS Pawan Shakya February 10, 2020 09:07 AM UTC

Thanks..
Looking forward to an update. 

Regards
Pawan Shakya 

SL Sowmiya Loganathan Syncfusion Team February 10, 2020 02:02 PM UTC

Hi Pawan,  

We have created the sample in Xamarin Forms - Android to import the barcode image from gallery and read the barcode using ZXing. Please find the sample for the same from below,  


Kindly try the above sample in your end and let us know the result. However, currently we are trying to read the barcode image from gallery using Zxing in Xamarin Forms - iOS and update the details on 12th February, 2020.  

Regards,              
Sowmiya Loganathan 


PS Pawan Shakya replied to Sowmiya Loganathan February 11, 2020 12:42 PM UTC

Hi Pawan,  

We have created the sample in Xamarin Forms - Android to import the barcode image from gallery and read the barcode using ZXing. Please find the sample for the same from below,  


Kindly try the above sample in your end and let us know the result. However, currently we are trying to read the barcode image from gallery using Zxing in Xamarin Forms - iOS and update the details on 12th February, 2020.  

Regards,              
Sowmiya Loganathan 


Thanks for proving sample Android app. However this doesn't seems to be working for me. 

Repro - 
1: Open mobile browser save wiki Qr code image in downloads. 
2: Open sample app, click scan button
3: While Debugging - image path is coming as null which leads to crash as sample app is looking to convert that into stream & access that. 

Attached screenshots zip for your reference. 

Attachment: Archive_fa18ab93.zip

SL Sowmiya Loganathan Syncfusion Team February 12, 2020 02:14 PM UTC

Hi Pawan,   
 
We have checked the provided sample in Android device and it works fine without any issue. We suspect that the issue may occurs due to denied of permission. While running the sample (after select of image from gallery), there will be popup box shows in android device. Kindly allow the permission to read the image file in storage of android device, then you can get the barcode text from result variable. Please refer the below screenshot for your reference,  
 
   
 
If still you have facing this issue, kindly share the below details and provide the better solution on this,   


 
  • Android device details like model name, android version
  • Xamarin forms version
  • Visual Studio version
  
Due to complexity, still we are working on creating the sample in Xamarin iOS. We will update the further details on 14th February, 2020.   
 
Regards,  
Sowmiya Loganathan  
 


SL Sowmiya Loganathan Syncfusion Team February 14, 2020 10:22 AM UTC

Hi Pawan,    
   
Thank you for your patience.    
   
We have created the sample to read the barcode image from the gallery using Zxing in Xamarin Forms iOS. Please find the sample for the same from below,   
   
   
Note: This sample includes the code for reading the barcode in Xamarin Android also.   
   
Please try the above sample in your end and let us know the result.    
 
Regards, 
Sowmiya Loganathan 


PS Pawan Shakya replied to Sowmiya Loganathan February 14, 2020 12:02 PM UTC

Hi Pawan,   
 
We have checked the provided sample in Android device and it works fine without any issue. We suspect that the issue may occurs due to denied of permission. While running the sample (after select of image from gallery), there will be popup box shows in android device. Kindly allow the permission to read the image file in storage of android device, then you can get the barcode text from result variable. Please refer the below screenshot for your reference,  
 
   
 
If still you have facing this issue, kindly share the below details and provide the better solution on this,   


 
  • Android device details like model name, android version
  • Xamarin forms version
  • Visual Studio version
  
Due to complexity, still we are working on creating the sample in Xamarin iOS. We will update the further details on 14th February, 2020.   
 
Regards,  
Sowmiya Loganathan  
 


Hi ,

On Android, never received this popup in the UI , this may be due to some obsolete calls been used (Forms.Context) to present the Toast.  (Attached that warning screenshots earlier)

 

Info -

Visual Studio Mac Version - 8.3.11

Realme 3 Pro - Android V 9

Xamarin Form - 3.4.0.1008975

 

Under Apps permission I could see Storage permission though.


I can try with Xamarin Form  3.6.0.709228 as well by Monday. But feels like that would not make any difference.


Regards

Pawan Shakya


PS Pawan Shakya February 17, 2020 07:08 AM UTC

Hi Sowmiya, 

Thanks for providing iOS as well. Below is overall findings for this - 

iOS - 
As per my initial test , app seems to be working fine for iOS on limited devices which I have tested as of now. Which is really a good sign. 

Android - 

Still Facing that issue which I have mentioned earlier and also provided system and device details earlier. Did some more analysis which I am sharing here - 

1: Xamarin.Forms.Forms.Context as MainActivity; - DEPREACATED (Forms.context)

2: Compilation Error with  “using Android.Graphics;” being used in MainPage.Xaml.cs. 

3: After removing “using Android.Graphics;”  - App is able to run . 
First time Allow popup came , but in meanwhile itself image path is coming as null which is leading to crash.


In below code able to get some binary bitmap but ,processing / decode to result always returns null irrespective of valid / invalid QR code image process. 


private Result Decode(Stream imageStream, string file, BarcodeFormat? format = null, KeyValuePair[] aditionalHints = null)
        {
            var r = GetReader(format, aditionalHints);

            MemoryStream ms = new MemoryStream();
            imageStream.CopyTo(ms);
            var bytes = ms.ToArray();

            var binaryBitmap = DependencyService.Get().GetBinaryBitmap(bytes);

            var result = r.decode(binaryBitmap);
// Result comes null each time , irrespective of proper Qr code image or not 

            return result;
        }

SL Sowmiya Loganathan Syncfusion Team February 17, 2020 12:33 PM UTC

Hi Pawan,     
   
Xamarin.Forms.Forms.Context as MainActivity; - DEPRECATED (Forms.context)    
Xamarin.Forms.Forms.Context is used to create the activity to load images from the gallery. So we could not able to use any other alternative in this.    
   
Note: We have tried the sample in our end with the provided system and device details, but due to this code snippet there is no problem in it.    
   
Compilation Error with  “using Android.Graphics;” being used in MainPage.Xaml.cs.    
   
After removing “using Android. Graphics;”  - App is able to run.    
The first time Allow popup came, but in meanwhile, itself image path is coming as null which is leading to crash.   
   
You can remove the namespace “using Android. Graphics” in MainPage.Xaml.cs class to avoid compilation issues.    
In the below code able to get some binary bitmap but, processing/decode to result always returns null irrespective of valid/invalid QR code image process.    
   
   
private Result Decode(Stream imageStream, string file, BarcodeFormat? format = null, KeyValuePair[] aditionalHints = null)   
        {   
            var r = GetReader(format, aditionalHints);   
   
            MemoryStream ms = new MemoryStream();   
            imageStream.CopyTo(ms);   
            var bytes = ms.ToArray();   
   
            var binaryBitmap = DependencyService.Get().GetBinaryBitmap(bytes);   
   
            var result = r.decode(binaryBitmap);   
                             // Result comes null each time, irrespective of proper Qr code image or not    
   
            return result;   
        }   
   
The image selected from the gallery should be a pure barcode to perform ZXing reading. Otherwise, the decoding result will be null only.    
   
Note:    
  • While processing different barcode type, kindly change format as specified in the below code snippet,
   
var result = Decode(imageStream, file: "image_to_read", format: BarcodeFormat.CODE_128, aditionalHints: new[] { aditionalHints });   
   
We have tried with the below barcode images and works properly without any issue,    
   
   
Kindly try this in your end and let us know the result.    
   
  
Regards, 
Sowmiya Loganathan 


PS Pawan Shakya February 17, 2020 01:00 PM UTC

Hi Sowmiya, 
Thanks for your response. 

Were you able to figure out the issue based on information (Xamarin Forms / Android device / OS) I have provided earlier in this thread. 

1: First time - ALLOW PopUp comes after selecting the image from Gallery not before invoking the gallery. Thus image path it gets as null and leads to crash the app.
This can be one of the main reason behind this issue. 

2: Subsequent - 
Next time onwards, Once we select the image it takes mins to process the image and finally result come as null for any kind of image. 

3: How much time it take to process the image? 
 
---
Attached image screenshot, here popup presented after selecting the image but meanwhile app crashed already in background. 


Attachment: AllowPoupComingAfterFilePath_1fb59efc.zip

SL Sowmiya Loganathan Syncfusion Team February 19, 2020 02:08 PM UTC

Hi Pawan,  
 
Please find the details from below, 
 
1: First time - ALLOW PopUp comes after selecting the image from Gallery not before invoking the gallery. Thus image path it gets as null and leads to crash the app. 
This can be one of the main reason behind this issue.  
 
We have modified the “MainActivity.cs” file in Andoird project to show “Request permission” popup before opening of gallery. Please find the download link from below,  
 
Note: As we updated before, While processing different barcode type, kindly change format based on the barcode type. Example: For QRBarcode kindly set the format as like below,  
 
var aditionalHints = new KeyValuePair<DecodeHintType, object>(key: DecodeHintType.PURE_BARCODE, value: "TRUE"); 
 
var result = Decode(imageStream, file: "image_to_read", format: BarcodeFormat.QR_CODE, aditionalHints: new[] { aditionalHints }); 
 
Please replace this with your sample and let us know the result.  
 
 
2: Subsequent -  
Next time onwards, Once we select the image it takes mins to process the image and finally result come as null for any kind of image.  
 
3: How much time it take to process the image?  
 
In the provided sample, we did not use any Syncfusion controls to read the barcode since we have used only native Zxing dll and file picker to pick the image from gallery. If you have facing any kind of issue related to this sample, please request support from Zxing and we could not able to process further on this.  
 
Regards, 
Sowmiya Loganathan 


PS Pawan Shakya February 20, 2020 10:49 AM UTC

Hi, 

We are still facing that issue with above sample attached. 

However while exploring more options, I found an example of SFImageEditor at following location. With this I am able to load image from Gallery to main page. No more image path null issue in this case. 
I have tried above sample and added some piece of code related to QR , which WORKED for me though to process QR code in both iOS & Android as well.
My current workaround its not that clean and using Old sdks as of now. 

  • Can you please analyse on what are the differences (import image context) between one you attached earlier in this thread and  above (in context of importing image )  and provide updated sample without using SFImageEditor.
  • If issue, than we are good with SFImageEditor kind of sample as well which include QR processing. 
Thanks for your help. 

SL Sowmiya Loganathan Syncfusion Team February 21, 2020 12:25 PM UTC

Hi Pawan,     
 
We have checked with the sample which you have given. But we have faced the below issues while running the sample,    
   
  • Throws exception for getting android permission
  • Asking permission popup is shown after only the opening of a gallery 
But in the previously provided sample covers the android access permission and permission popup shows only after the gallery open. Please find the sample from below,     
   
Note: we updated before, While processing different barcode format in decode method, kindly change format based on the barcode type.     
i.e.,   
var result = Decode(imageStream, file: "image_to_read", format: BarcodeFormat.CODE_128, aditionalHints: new[] { aditionalHints });      
   
Kindly try the sample with the above image and let us know the result. 
 
Regards, 
Sowmiya Loganathan 


PS Pawan Shakya February 24, 2020 12:55 PM UTC

Hi Sowmiya, 

Last sample is having same problem as earlier (problem with importing image path as null in Android case). 

And also in iOS case in above example,  if I import any camera taken image (Ex: Default image in iOS simulators (non QR image) it takes lot amount of time to process & UI hangs up after that). That loop processing in such case take good amount of time and hangs the UI and output windows shows below message. 

iOS[36399:11144485] [Graphics] UIColor created with component values far outside the expected range. Set a breakpoint on UIColorBreakForOutOfRangeColorComponents to debug. This message will only be logged once.

for (int i = 0; i < c; ++i)
            { byte alpha = rawData[byteIndex + 3]; ......}

-----------
Apart from this can you please help us with latest sample of SFImageEditor (MVVM based) with feature of importing image from gallery. 

I believe we can use that to integrate QR code processing code (provided in your sample though).  Because my problem is not with Qr code processing, its more with image import. 

Regards
Pawan Shakya

SL Sowmiya Loganathan Syncfusion Team February 28, 2020 10:11 AM UTC

Hi Pawan,    
   
The last sample is having the same problem as earlier (problem with importing image path as null in Android case).     
We suspect that this issue occurs due to import the improper image file (other than barcode image) from the gallery. For the previously provided sample, kindly load the pure barcode image file to scan the barcode.   
And also in the iOS case in the above example,  if I import any camera taken image (Ex: Default image in iOS simulators (non QR image) it takes a lot amount of time to process & UI hangs up after that). That loop processing in such a case take a good amount of time and hangs the UI and output windows shows below the message.    
   
iOS[36399:11144485] [Graphics] UIColor created with component values far outside the expected range. Set a breakpoint on UIColorBreakForOutOfRangeColorComponents to debug. This message will only be logged once.   
for (int i = 0; i < c; ++i)   
            { byte alpha = rawData[byteIndex + 3]; ......}   
   
As we said earlier, we did not use any Syncfusion component in this. We just use the Zxing library to scan the barcode and this will accept only raw data of image file. So we have converted the barcode image to RGB data and this will take some amount of time to process.    
Apart from this can you please help us with the latest sample of SFImageEditor (MVVM based) with a feature of importing an image from the gallery.    
We have created a sample to load images from the gallery. Please find the sample from the below location.     
  
Regards, 
Sowmiya Loganathan 


Loader.
Live Chat Icon For mobile
Up arrow icon