Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

iOS: WKWebView - Image URI could not open #56

Closed
webnologie opened this issue Jul 8, 2019 · 11 comments
Closed

iOS: WKWebView - Image URI could not open #56

webnologie opened this issue Jul 8, 2019 · 11 comments
Assignees
@ChrisTomAlx
Labels
bug Something isn't working question Further information is requested

Comments

@webnologie
Copy link

Hello!
first i wanna thank you for your plugin!
but i have one problem with ios. if i receive the imageuri (file:///var/...) i cant open the file. i tried it directly with <image src... and also to get the stream buffer and generate a blob. andorid, no problem but ios will not work.

maybe you can help me. thank you!
@ChrisTomAlx
Copy link
Collaborator

Hey @webnologie

Thanks for raising an issue.
Could you please also provide the following information so I can look into this?

  • iOS version (eg 12.2.1)
  • Is it simulator or real device ?
  • iOS device (eg iPhone 6, iPad etc)
  • Cordova Version
  • Cordova ios version

Cheers and have a nice day!
Chris
Neutrinos

@ChrisTomAlx ChrisTomAlx self-assigned this Jul 8, 2019
@webnologie
Copy link
Author

webnologie commented Jul 8, 2019 via email

@ChrisTomAlx
Copy link
Collaborator

ChrisTomAlx commented Jul 8, 2019 •
edited
Loading

Hey @webnologie

Would it be possible for you to zip a sample project with this issue and send it over so I can check it out on my side. You can use firefox send.

Also could you provide the version of the plugin you are using?

Cheers
Chris
Neutrinos

@webnologie
Copy link
Author

webnologie commented Jul 8, 2019 via email

@ChrisTomAlx
Copy link
Collaborator

Thanks for the share @webnologie.
I will see what I can find and get back to you as soon as I can.

Cheers
Chris
Neutrinos

@webnologie
Copy link
Author

webnologie commented Jul 8, 2019 via email

@ChrisTomAlx
Copy link
Collaborator

So I figured out what the problem is,
This is being caused by wkwebview.. Sigh..

So the issue is that wkwebview doesn't allow you to load images the traditional way. I was playing around with some fixes that did not pan out. There is one more thing that I am going to try. If you get the time you could try it on your end as well (It is a JavaScript only solution so there is no native code involved). Here you go :- https://www.construct.net/en/blogs/ashleys-blog-2/hacking-something-useful-932

Cheers
Chris
Neutrinos

@ChrisTomAlx ChrisTomAlx pinned this issue Jul 10, 2019
@ChrisTomAlx ChrisTomAlx changed the title iOS: Imageuri could not open iOS: WKWebView - Image URI could not open Jul 10, 2019
@webnologie
Copy link
Author

webnologie commented Jul 10, 2019 via email

@ChrisTomAlx
Copy link
Collaborator

ChrisTomAlx commented Jul 10, 2019 •
edited
Loading

So I have a workaround for you. Until WkWebView has fixed these issues we will have to do as below.

  • Firstly add cordova-plugin-file to your project as shown below (for cordova projects) :-
  cordova plugin add cordova-plugin-file
  • Then you can use the scanner plugin in this way :-
scan.scanDoc(onSuccess, onFail, { sourceType: 1, fileName: "image" });

function onSuccess(imageURI) {
   console.log(imageURI);
   // Convert the uri to base 64 using cordova-plugin-file
   getFileContentAsBase64(imageURI, function (base64Image) {
       // Use base 64 to set the src 
       document.getElementById("myImage").src = base64Image;
   });
}

function onFail(message) {
   alert('Failed because: ' + message);
}

function getFileContentAsBase64(path, callback) {
   window.resolveLocalFileSystemURL(path, gotFile, fail);

   function fail(e) {
       alert('Cannot find requested file');
   }

   function gotFile(fileEntry) {
       fileEntry.file(function (file) {
           var reader = new FileReader();
           reader.onloadend = function (e) {
               var content = this.result;
               callback(content);
           };
           reader.readAsDataURL(file);
       });
   }
}

Note :- Basically what we are doing is natively converting the file URI to base64 then getting this base64 back to set the img src. This might cause your app to take a small performance hit. Also you might have to use progress spinners so that the user knows to wait for a response.

PS :- I have tested this code only with iOS. Also this is only required for iOS. So you could improve performance in Android devices by running this code only if platform is iOS. But if you choose to test this code on Android as well, please let me know if it works out correctly as I haven't tested on Android.

Let me know if you are running into any other troubles. Also do close the issue if this solved your problem

Thanks and Cheers from India :)
Chris
Neutrinos

@webnologie
Copy link
Author

webnologie commented Jul 10, 2019 via email

@ChrisTomAlx
Copy link
Collaborator

Hey @webnologie

Please send me your paypal-address. I wanna send you a little something!

Thanks a ton for the offer but for now your gratitude and your perseverance to stick with this issue till it was fixed is all that is required. Future users that run into this issue now have access to an easy workaround, thanks to you :)

This was great support. Maybe you can also send me your contact-infos – maybe I have something for you in future – if you are interested.

Definitely, you can get in touch with me using the following E-mail ID's
Work (Neutrinos) :- christy.alex@neutrinos.co
Company (Neutrinos) :- ideas@neutrinos.co
Personal :- christythomasalex@gmail.com

Closing this issue. Please feel free to open another if you need help.

Cheers
Chris
Neutrinos

@ChrisTomAlx ChrisTomAlx added question Further information is requested bug Something isn't working labels Jul 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ChrisTomAlx ChrisTomAlx

Labels
bug Something isn't working question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@webnologie @ChrisTomAlx