Ionic 2 : CameraPreview plugin, how to deal with the given URI?

Question

I come here because I use the CameraPreview class from ionic-native in my ionic 2 project to take a picture, and I actually struggle with the path of the picture which is something like : assets-library://asset/asset.JPG?id=...

That type of URL is obviously impossible to render in the DOM, and I want to know how to convert it into a supported URL for the img or ion-img tag.

I tried to convert it using File.readAsDataURL() as it is suggested in the following links, but the promise return an empty string.

https://www.npmjs.com/package/cordova-camera-preview http://ionicframework.com/docs/v2/native/file/

score 0 · Answer 1 · edited May 23 '17 at 12:33

You can load it via http as a Blob and then set that as the src for an img.

Example below:

this.http.get(fileURI, new RequestOptions({responseType:ResponseContentType.Blob}))
            .subscribe(
                data => {
                    var blob = data.blob();
                    this.previewImage = this.sanitize(URL.createObjectURL(blob));
                    this.cd.detectChanges();
                });

Make note of the sanitize function. This is required to bypass default browser security - see https://stackoverflow.com/a/37432961/3446442

In this example the img tag is bound to the previewImage variable:

<div [style.width.px]="cameraSize" [style.height.px]="cameraSize">
    <img id="preview" [src]="previewImage">
</div>

Ionic 2 : CameraPreview plugin, how to deal with the given URI?

1 Answers1