web-dev-qa-db-ja.com

PhoneGap Buildのリモートページからのローカルイメージの「ローカルリソースのロードを許可しない」

PhonegapビルドアプリのWebページをホストしています。カメラを使用して写真をアップロードし、画像のプレビューを表示したいのですが、基本的には次のようにします：

<img src="file:///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg" height="500" />

私のページはホストされているため、このエラーが発生しています：

ローカルリソースのロードが許可されていません：file：///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg "、ソース： https://www.myapp.com /v5.5/imager.html#

これはCORSの問題だと思うので、ページのhtmlにこれを追加しました

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">

これをconfig.xmlに追加します（Phonegap Buildを使用しています）

 <plugin name="cordova-plugin-whitelist" source="npm" />

 <allow-navigation href="*" />
 <allow-navigation href="*://*/*" />
 <allow-navigation href="file:///*/*" />
 <allow-navigation href="http://*/*" />
 <allow-navigation href="https://*/*" />
 <allow-navigation href="data:*" />

 <allow-intent href="*" />
 <allow-intent href="http://*/*" />
 <allow-intent href="https://*/*" />
 <allow-intent href="tel:*" />
 <allow-intent href="sms:*" />
 <allow-intent href="mailto:*" />
 <allow-intent href="geo:*" />

 <access Origin="*" />
 <access Origin="*://*/*" />
 <access Origin="file:///*" />
 <access Origin="cdvfile://*" />
 <access Origin="content:///*" />

ご覧のとおり、Webの精査から考えられるすべての設定を試しました。明らかな何かが欠けていますか？

前もって感謝します。

imagecordovacorsphonegap-build
17
Nico Westerdale

OKはついに回避策を得ました。これはfile：/// URIをcdvfile：// URIに変換することです。私のページはコンテンツの混合警告のみであり、アクセスを許可します！

function getFileEntry(imgUri) {
            window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {
                console.log("got file: " + fileEntry.fullPath);
                console.log('cdvfile URI: ' + fileEntry.toInternalURL());
                $('#imgPreview').attr("src", fileEntry.toInternalURL());
            });
        }

File：/// URIにアクセスする適切な方法があればいいのですが、これでうまくいかない場合がありますが、私がやっていることは解決されています。

13
Nico Westerdale

これに遭遇する将来のユーザーのためにここで注意すべきことは、このような機能をテストする際に「ライブリロード」モードで実行していないことを確認してください。ライブリロードでは、この同じエラーメッセージが表示され、明らかに誤解を招く可能性があります。ライブリロードなしでビルドした後、ファイル：/ OR cdv：/ path。

12
Nicholas Kreidberg

私は最近同じ問題に直面しました。 cordova iosアプリはlocalhost：8080で内部的に実行されているようです。これが、「file：//」プロトコルからファイルをロードできない主な理由です。

簡単な修正-「var workingPath = window.Ionic.normalizeURL（givenPath）」;

IONICそれについて- https://ionicframework.com/docs/wkwebview/ から記事を読んでください。

8
Vladyslav Goloshchapov

@Vladyslav Goloshchapovからの回答は、私の状況に適したものです（非推奨ではない形式を使用）。

Ionicアプリ内からIonic app（both Ionic 4）を使用して、 phonegap-plugin-contentsync これにより、ファイル（私の場合はIonicアプリ）をダウンロードしてローカルファイルシステムに解凍できます。2番目のアプリは公開アプリではありません）。

私はこれを次のように使用しました：window.location.href = window.Ionic.WebView.convertFileSrc(url); for iOS。

Androidはそれほど複雑ではないので、window.open(url, '_self');を使用できます

URLの形式（iOSの場合）：file:///var/mobile/Containers/Data/Application/[UUID]/Library/NoCloud/[appFolder]/index.html

1
Russ

これはionic 3で動作しています。以下を使用して、ローカルリソースの読み込みを許可しないという問題を解決できます。

まず、これらのものをhome.tsに入れます

import { Base64 } from '@ionic-native/base64';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from 
'@angular/platform-browser';

//inside the export class
base64Image:any;
croppedImage = null;

constructor(
  public base64:Base64,
  public domSanitizer:DomSanitizer,
) {}    

selectImage() {
const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  correctOrientation: true,
  sourceType:0,
}
  this.croppedImage = null;
  this.camera.getPicture(options).then((imageData) => {
  this.croppedImage = imageData;
  this.crop.crop(this.croppedImage, {quality: 100,targetWidth: -1, targetHeight: 
-1 })
.then(
newImage => {
  this.base64.encodeFile(newImage).then((base64File: string) => {
  let imageSrc = base64File.split(",");
  this.base64Image = 'data:image/jpeg;base64,' + imageSrc[1];
  this.croppedImage = 
  this.domSanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,' + 
imageSrc[1]);
}, (err) => {
  console.log(err);
});
  console.log('new image path is: ' + newImage);
},
error => {
  console.error('Error cropping image', error);
}
);
//  this.myImage = 'data:image/jpeg;base64,' + imageData;
});
}

次に、ビューhome.htmlで物事の下に置きます

    <button ion-button full (click)="selectImage()" 
 *ngIf="!base64Image">Gallery</button>
    <button ion-button full (click)="selectImageFromCamera()">Camera</button>
    <ion-row *ngIf="croppedImage">
       <ion-card>
          <ion-card-header>Cropped Image</ion-card-header>
          <ion-card-content padding>
             <img [src]="croppedImage">
          </ion-card-content>
       </ion-card>
    </ion-row>`enter code here`
1
Alok Singh

私の解決策はcordova-plugin-ionic-webviewプラグインリストから

0
rashidnk

Ionic3アプリに取り組んでおり、chromeインスペクターを使用してコンソールをテストしていました。- -livereloadフラグ、エミュレーターにも実デバイスにもイメージが表示されていませんでした。 上記のリンク に移動し、モジュールをインポートしました
import {normalizeURL} from 'ionic-angular';
画像キャプチャ機能の成功コールバックで、このようなパスを渡しましたが、それは魅力のように機能しました。
もう少し調査した結果、-livereload Flagのために、commandからフラグを削除し、実行することがわかりました。次のコマンドを含むプログラムとその表示画像：
ionic cordova run Android

    takePhoto() {
        this.camera.getPicture(this.getCameraOptions()).then((imageData) => {
         this.isPhotoTaken = true;
         this.photo = normalizeURL(imageData); 
         console.log("PHOTO PATH: "+ this.photo)
        }, (err) => {
            console.error('IMAGE CAPTURE ERROR: ' + err);
        });
      }

     setCameraOptions() {    
        const options = {
          quality: 100,
          sourceType: this.camera.PictureSourceType.CAMERA,
          saveToPhotoAlbum: false,
          correctOrientation: true
        };
        return options;
      }

  getCameraOptions(): CameraOptions{
    return this.setCameraOptions();
  }
0
ImFarhad