Skip to main content

ionic2 - cordova camera plugin content:// in img tag , image not displayed

Recently in ionic2 I faced a weird problem when using camera plugin in android . My app simply allows user to either take picture from camera or select image from gallery. When user takes picture from camera everything works fine but if user selects image from gallery , image is not displayed (using img tag). Very first difference i spotted between camera and gallery image was the uri of file. Camera image has following format
file:///path/to/image.jpg
where gallery image has following format
content://media/external/image/238
I debugged my project using Android Studio and I found that when i try to display gallery image using img tag , following error is shown in console
URL blocked by whitelist
 It was clear that whitelist plugin is blocking content:// requests so I tried to add content:// as whitelisted uri in my config.xml . I added the following lines
<access origin="content://*" /><allow-nagivation href="content://*" />
BUT TO NO AVAIL.

I tried adding different variants in config.xml but nothing worked so I debugged the whitelist plugin and it appeared that angular was adding unsafe: keyword to the beginning of content:// url. So the whole uri passed to whitelist plugin was like this
unsafe:content://media/external/image/238
After trying different methods finally I found something in angular documentation called DomSantizier. This class provides method to bypass security trust when dealing with unsafe url. I used bypassSecurityTrustUrl function of this class.

Here are relevant snippet of codes to make it work

Add DomSanitizer
import {DomSanitizer} from '@angular/platform-browser';
Reference it in your component's constructor
constructor(private sanitizer:DomSanitizer, .....
Create a helper method to which we will pass our unsafe url and it will call bypassSecurityTrustUrl on that url.
sanitize(url:string){    return this.sanitizer.bypassSecurityTrustUrl(url);}
Now in our html we will call this sanitize url and pass the image url. Here is what my img looks like
<img [src]="sanitize(image)" />
image  is a variable that contains our image file uri.
Labels:

Comments

Post a Comment

Share your wisdom

Popular posts from this blog

Decoding JPEG image file using libavcodec

I got a chance to work on a video encoding application that decodes series of jpeg files and convert them into ogg theora video file. I used the infamous libavcodec library that is used in FFMPEG . I decided to write blog posts explaining how I decode jpeg images and convert them into ogg video file. This is the first part and in this I will explain how to decode jpeg images using libavcodec. To learn how to write decoded images as a ogg video file please read http://random-stuff-mine.blogspot.com/2017/07/encoding-raw-images-to-ogg-theora-video.html Before reading this blog post you must be aware of using and setting up libavcodec. I highly recommend this tutorial to get basics of using libavcodec http://www.ffmpeg.org/doxygen/0.6/api-example_8c-source.html Allocating input format context We will first allocate input format for reading the file. We will use avformat_open_input function that will allocate AVFormatContext structure passed to it , the function detects input typ...
Post a Comment
Read more

Multithreaded C# TCP server to handle multiple clients

I decided to write a minimal multithreaded TCP based server as a blog post. Following class can serve as a skeleton for any small or large scale multithreaded TCP socket server. It do not contain much error handling , it is only to give an idea that how multithreaded server works and how it can process multiple clients using threading. using System; using System.Text; using System.Net; using System.Net.Sockets; using System.Threading; using System.Collections.Generic; namespace RandomStuffMine { public class MTServer {     public int Port{get;set;}     public Socket ServerSocket{get;set;}     private List<Client> Clients=new List<Client>();     private bool runServer=true;     public MTServer(int port)     {         Port=port;         ServerSocket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);     }   ...
1 comment
Read more

CryptographicException: An error occurred while trying to encrypt the provided data. Refer to the inner exception for more information

I created a new Blazor Server app in Visual Studio 2019 and tried to run it. But I was getting this error CryptographicException: An error occurred while trying to encrypt the provided data. Refer to the inner exception for more information. I couldn't find any reason or solution to this problem. I tried creating the project multiple times but same error. I created a new .Net Core Web App and added a new razor component and included that component in a razor page (cshtml file) like this @(await Html.RenderComponentAsync<GeofenceWork>(RenderMode.ServerPrerendered)) and <component type="typeof(GeofenceWork)" render-mode="serverprerendered" /> As soon as I navigate to this page that has component added I got the same error: CryptographicException: An error occurred while trying to encrypt the provided data. Refer to the inner exception for more information. This was very frustrating. After hours of trying and searching I figured out the solution.  ...
Post a Comment
Read more