web-dev-qa-db-ja.com

ネイティブカメラで撮影したFILE_URI画像をIonic 3

Ionic 3）で@ionic-native/cameraを使用してユーザーが撮影したFILE_URI画像をどのように表示しますか？

Ionic Native's Cameraを使用してFILE_URI画像のURLを取得すると、次のような結果になります。

file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg

ただし、ビューテンプレートのURIを参照してこの画像をユーザーに表示しようとすると、画像が読み込まれません。

私が試したこと：

-ビューで直接画像URIを使用する

<img src="{{profile.image}}">    // Never loads

-ページコンポーネントにDomSanitizerを含めることにより、URIをサニタイズします。

<img [src]="domSanitizer.bypassSecurityTrustUrl(profile.image)">    // Never loads

パフォーマンスの低下のため、base64イメージは使用しません。私はここで何が間違っているのですか？

ionic-frameworkionic3ionic-native
3
caitlin

import {normalizeURL} from'ionic-angular '; ionic3 <img> tag src

<img *ngIf="base64Image" src="{{base64Image}}"/> 

 openCamera(pictureSourceType: any) {
  let options: CameraOptions = {
   quality: 95,
     destinationType: this.camera.DestinationType.FILE_URI,
  sourceType: pictureSourceType,
   encodingType: this.camera.EncodingType.PNG,
  targetWidth: 400,
   targetHeight: 400,
  saveToPhotoAlbum: true,
  correctOrientation: true
 };
 this.camera.getPicture(options).then(imageData => {
  if (this.platform.is('ios'))
  this.base64Image = normalizeURL(imageData);
  // IF problem only occur in ios and normalizeURL 
  //not work for you then you can also use 
  //this.base64Image= imageData.replace(/^file:\/\//, '');
   else
         this.base64Image= "data:image/jpeg;base64," + imageData;
        }, error => {
     console.log('ERROR -> ' + JSON.stringify(error));
    });
   }
2
Manoj Bhardwaj

こんにちはファイルパスionicプラグイン

path = "file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg";
this.filePath.resolveNativePath(path)
   .then(filePath => console.log(filePath))
   .catch(err => console.log(err));

ドキュメントをお読みください https://ionicframework.com/docs/native/file-path/

0
yajuve

以下のコードを使用して画像を表示できます

savePhotoClick = () =>{

const options: CameraOptions = {
  quality: 70,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64 (DATA_URL):
  this.base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  // Handle error
});

次に、表示にimgタグを使用します

 <img [src]="base64Image" *ngIf="base64Image" />
0
Sumant Singh