0

私はWindows Phoneの開発に不慣れで、phonegap/cordovaを使用してアプリを移植する必要があります。私のコードのほとんどは Android/iOS と winphone で動作しますが、この FileOpenPicker ではブロックされています。私は winjs 2.1 を使用しています。この機能が必要なページにいるときに呼び出されるスクリプトを準備したいと思います。

私はたくさんの例を読みましたが、解決策にかなり近づいていると思います。

私のhtmlファイルでは、次のように宣言しています。

<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<script type="text/javascript" src="js/default.js"></script>

これは、FileOpenPicker を呼び出す必要があるページで使用するファイル、default.js です。

(function () {
"use strict";

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

app.onloaded = function (args) {
    var activationKind = args.detail.kind;

    document.getElementById("btnSnap").addEventListener("click", pickSinglePhoto);

    if (activationKind === Windows.ApplicationModel.Activation.ActivationKind.pickFileContinuation) {
        continueFileOpenPicker(options.activatedEventArgs);
    }           
};

function pickSinglePhoto() {
    // Clean scenario output 
    WinJS.log && WinJS.log("", "sample", "status");
    console.log("in pickSinglePhoto");

    // Create the picker object and set options 
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
    // Users expect to have a filtered view of their folders depending on the scenario. 
    // For example, when choosing a documents folder, restrict the filetypes to documents for your application. 
    openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

    // Open the picker for the user to pick a file 
    openPicker.pickSingleFileAndContinue();
}

// Called when app is activated from file open picker 
// eventObject contains the returned files picked by user 
function continueFileOpenPicker(eventObject) {
    console.log("in continueFileOpenPicker");
    var files = eventObject[0].files;
    var filePicked = files.size > 0 ? files[0] : null;
    if (filePicked !== null) {
        // Application now has read/write access to the picked file 
        WinJS.log && WinJS.log("Picked photo: " + filePicked.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file 
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
}

app.start();
})();

残念ながら、これは機能しません。フラグactivationKindが常に未定義であるため、continueFileOpenPickerに入ることができません。app.onloaded の代わりに app.onactivated を使用する必要があると確信していますが、前者の場合、関数に入ることができません。

私はすでに関数 pickSinglePhoto を試してみましたが、うまくいくようですが、アプリがクラッシュするため、選択後にページに戻ることができません.

どんな手掛かり？

4

2 に答える 2

0 
(function () {
"use strict";

var app = WinJS.Application;

app.onloaded = function (args) {

document.getElementById("btnSnap").addEventListener("click", pickSinglePhoto);
}

//This is where the app should validate the ActivationKind
app.onactivated = function ( args ) {

var value = args.detail.kind;

if (value ===     Windows.ApplicationModel.Activation.ActivationKind.pickFileContinuation)
{
continueFileOpenPicker(args);
}

}

function pickSinglePhoto() {

console.log("in pickSinglePhoto");

var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

openPicker.suggestedStartLocation =     Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

openPicker.pickSingleFileAndContinue();

}


function continueFileOpenPicker(eventObject)
{
var imagen = eventObject.detail.files[0];

//whatch the properties of this object in the debuger
console.log(imagen.displayName);


}


app.start();
})();

このコードはあなたのために働くでしょう。

于 2016-05-23T22:29:07.310 に答える
0

やっと手に入れました。これは、Cordova Camera Plugin JIRA の問題 (リンク)からの公式の回答に基づく私の実用的なソリューションです。

  1. 公式のカメラ プラグイン Cordova を使用する (リンク)
  2. 主なファイル: index.html、index.js、new.html、new.js、wp_get_image.js、utils.js。

まず、index.html (メイン ページ) で wp_get_image.js スクリプトを宣言しました。

<script type="text/javascript" src="js/localstoragedb.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/wp_get_image.js"></script> 
<script type="text/javascript" src="js/index.js"></script>

覚えて：

「要するに、ギャラリーから画像を選択すると、画像が選択されるまでアプリが一時停止し、開始ページ (config.xml で定義) で再開されます。別のページから getPicture を呼び出した場合、これによりアプリ全体がリロードされて開きます。さらに、この場合、getPicture へのコールバックも消去されるため、プラグインから結果が得られません。」

そのため、カメラの成功からのコールバックをインターセプトするために、インデックス ページにフックが必要です。これは私の wp_get_image.js です:

var goto_new_page_winphone = "";

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {

        if (args.detail.kind === activation.ActivationKind.launch) {
            var that = this;

            // Init:
            goto_new_page_winphone = "";
            localStorage.setItem("image_url_winphone", "");
        }

        if (args && args.detail.kind === activation.ActivationKind.pickFileContinuation) {
            continueFileOpenPicker(args);
        };

        args.setPromise(WinJS.UI.processAll().then(function () {
            // Text
        }));
    };

    function continueFileOpenPicker(eventObject) {

        console.log("in continueFileOpenPicker");
        var filePicked = eventObject.detail.files[0];
        var msgBox;
        if (filePicked !== null) {
            // Save filePicked.path in localstorage:
            localStorage.setItem("image_url_winphone", filePicked.path);
        } else {
            msgBox = new Windows.UI.Popups.MessageDialog("Operation cancelled.");
            msgBox.showAsync();
        }
        // Save back page:
        goto_new_page_winphone = read_backpage();
    };
app.start();
})();

localstorage を使用して画像の URL を保存し、ローカル変数を使用して元のページ (new.html という名前のページ) を保存します。read_backpage() 関数は、ユーザーがアクセスしたページを追跡する utils.js ファイルで宣言されています。そのため、写真を撮った new.html ページでアクションを実行した後、システムは私をインデックス ページに戻します。そこで、元のページを読む必要があります。だから私のindex.jsで：

window.addEventListener("load", load, false);

function load() {
    if (device.platform != undefined) {
        var plat = device.platform;
        plat = plat.substring(0, 3);
        if (plat.toLowerCase() == "win") {
            if (goto_new_page_winphone && goto_new_page_winphone.length > 0) {
                window.location.href = goto_new_page_winphone;
            }
        }
    }
}

注意: フローは次のとおりです: index.js で $(document).ready -> wp_get_image.js で app.onactivated -> index.js で読み込みます。そのため、goto 関数 (window.location.href = goto_new_page_winphone) を $(document).ready 内に置かないでください。そうしないと、var goto_new_page_winphone が null になり、移動できなくなります。

さて、この時点で、new.html ページの画像を選択し、index.html に戻りましたが、アプリを goto_new_page_winphone に宣言されたページにリダイレクトできることを願っています (私の場合、ページは new.html と呼ばれます)。 .

new.js (new.html に関連するスクリプト) で、画像のパスを取得します。

if (is_winphone) {
        var image_url = localStorage.getItem("image_url_winphone");
        if (image_url && image_url.length > 0) {
            upload_img("newprofile", image_url, function (urlimg) {
                // Reset localstorage var:
                localStorage.setItem("image_url_winphone", "");
                if (urlimg.length > 0) {
                    urlimg = urlimg.replace(/\\/g, '');
                    console.log(urlimg);
                    // Save remote url in my localstorage
                    wp_save_img_url(urlimg);
                }
            });
        }
    }

私の場合、upload_img 関数を介してサーバーに画像を送信し、サーバーは目的のために保存したリモート URL で応答します。upload img func は、File Tranfer Plugin doc に従って作成できる単純な関数です。

于 2016-09-10T15:09:55.843 に答える