SuperApp:Camera

WVCamera.takePhoto

WVCamera.takePhoto メソッドは、カメラで新しい写真を撮るか、アルバムから既存の写真を選択するようユーザーに促します。写真を取得した後、ミニアプリにアップロード機能を実装できます。

次のコードは一例です。

var photoLocalPath; // ローカルファイルパスを格納します。
var params = {
        mode: 'both',
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
     var uploadParams = {
              // アップロードする写真のパス
              path: e.localPath
      };
      // formData をバックエンドサービスに送信してファイルを保存する独自のロジックを実装します。
      ...
      ...
}, function(e) {
        alert('takePhoto failure: ' + JSON.stringify(e));
});

入力パラメーター

• [string] mode：オプション。選択ソースを指定します。`'camera'` はデバイスのカメラを開きます。`'photo'` はフォトアルバムを開きます。デフォルト値の `'both'` は、ユーザーがカメラとアルバムのどちらかを選択できるようにします。

• [boolean] compatible：オプション。ミニアプリを表示した後にこのメソッドを呼び出す場合は、これを `true` に設定します。

コールバックパラメーター

これらのパラメーターはコールバック関数に渡されます。写真が正常に取得された場合は `success` コールバックが実行され、操作が失敗した場合やユーザーがキャンセルした場合は `failure` コールバックが実行されます。

成功コールバックのパラメーター：

• [string] url：アクセス URL です。写真をプレビューするには、この URL を `img` 要素の `src` プロパティに割り当てます。

  重要

  これは実際のコンテンツデリバリーネットワーク (CDN) の URL ではないため、ブラウザからアクセスすることはできません。

• [string] localPath：写真のローカルファイルパスです。このパスは、`WVCamera.confirmUploadPhoto` などを使用した後のアップロードに使用できます。

• [string] identifier：写真の識別子です。Mtop (`v = '2.0'`) を使用して写真をアップロードすると、入力パラメーターの `identifier` が返されます。

• [string] base64Data：写真の Base64 エンコードされたデータです。このパラメーターは、`needBase64 = true` が設定されている場合にのみ返されます。このデータを使用するには、`data:image/png;base64,` プレフィックスを先頭に追加する必要があります (`VER.WindVane 8.0.0` 以降)。

失敗コールバックのパラメーター：

• [string] errorType：エラータイプです。

• [string] errorCode：エラーコードです。

• [string] errorMsg：エラーメッセージです。

• [string] identifier：写真の識別子です。Mtop (`v = '2.0'`) を使用して写真をアップロードすると、入力パラメーターの `identifier` が返されます。

イベントリスナー

WVPhoto.Event.takePhotoSuccess

このイベントは、写真が取得され、アップロードされる直前に発生します。この時点で、JavaScript コードはページ上で写真をプレビューできます。

イベントパラメーター：

• [string] url：アクセス URL です。写真をプレビューするには、この URL を `img` 要素の `src` プロパティに割り当てます。

  重要

  これは実際の CDN の URL ではないため、ブラウザからアクセスすることはできません。

• [string] localPath：ローカルファイルパスです。このパスはアップロードに使用できます。

複数選択モード

このモードでは、ユーザーは一度に複数の写真を選択してアップロードできます。iOS 上の WindVane でのみ利用可能で、アルバムから写真を選択する場合にのみ機能します。カメラを使用する場合、前述の単一写真モードに戻ります。そのため、`mode: 'photo'` を渡して直接アルバムに移動することを推奨します。

入力パラメーター

• [string] mutipleSelection：オプション。複数選択モードを有効にするかどうかを指定します。`'1'` はモードを有効にし、`'0'` は無効にします。デフォルトは `'0'` です。

• [int] maxSelect：オプション。複数選択モードで選択できる写真の最大数です。デフォルトは `9` です。

コールバックパラメーター

`success` コールバックは写真が正常に取得された場合に実行されます。`failure` コールバックは、操作が失敗した場合やユーザーがキャンセルした場合に実行されます。

成功コールバックのパラメーター：

• [array] images：ユーザーが選択した写真の配列です。配列内の各項目には、次のプロパティが含まれています：

  • [string] url：アクセス URL です。写真をプレビューするには、この URL を `img` 要素の `src` プロパティに割り当てます。

    重要

    これは実際の CDN の URL ではないため、ブラウザからアクセスすることはできません。

  • [string] localPath：写真のローカルファイルパスです。このパスは、`WVCamera.confirmUploadPhoto` などを使用した後続のアップロード操作に使用できます。

失敗コールバックのパラメーター：

• [string] errorType：エラータイプです。

• [string] errorCode：エラーコードです。

• [string] errorMsg：エラーメッセージです。

• [string] identifier：写真の識別子です。Mtop (`v = '2.0'`) を使用して写真をアップロードすると、入力パラメーターの `identifier` が返されます。

イベントリスナー

WVPhoto.Event.takePhotoSuccess：写真が取得され、アップロードされる直前に発生します。この時点で、JavaScript コードはページ上で写真をプレビューできます。

イベントパラメーター：

• [string] url：アクセス URL です。写真をプレビューするには、この URL を `img` 要素の `src` プロパティに割り当てます。

  重要

  これは実際の CDN の URL ではないため、ブラウザからアクセスすることはできません。

• [string] localPath：ローカルファイルパスです。このパスはアップロードに使用できます (`WindVane on Android のみ`)。

次の 2 つのイベントは、写真選択後の即時アップロードの場合にのみトリガーされます：

WVPhoto.Event.uploadPhotoSuccess：写真が正常にアップロードされるたびに発生します。

イベントパラメーター：

• [string] url：アクセス URL です。写真をプレビューするには、この URL を `img` 要素の `src` プロパティに割り当てます。

  重要

  これは実際の CDN の URL ではないため、ブラウザからアクセスすることはできません。

• [string] localPath：写真のローカルファイルパスです。このパスを使用して、後でアップロードするためのファイルデータを取得できます。

• [string] identifier：写真の識別子です。Mtop (`v = '2.0'`) を使用して写真をアップロードすると、入力パラメーターの `identifier` が返されます。

WVPhoto.Event.uploadPhotoFailed

写真のアップロードが失敗するたびに発生します。

イベントパラメーター：

• [string] errorType：エラータイプです。

• [string] errorCode：エラーコードです。

• [string] errorMsg：エラーメッセージです。

• [string] identifier：写真の識別子です。Mtop (`v = '2.0'`) を使用して写真をアップロードすると、入力パラメーターの `identifier` が返されます。

document.addEventListener('WVPhoto.Event.uploadPhotoSuccess', function (e) {
        alert('event uploadPhotoSuccess: ' + JSON.stringify(e.param));
});
document.addEventListener('WVPhoto.Event.uploadPhotoFailed', function (e) {
        alert('event uploadPhotoFailed: ' + JSON.stringify(e.param));
});

var params = {
        // 選択後に写真を自動的にアップロードするかどうかを指定します。
        type: '1',
        // ソースをカメラまたはアルバムに限定するかどうかを指定します。
        mode: 'photo',
        // アップロードメソッドです。
        v: '2.0',
        // 複数選択モードを使用するかどうかを指定します。
        mutipleSelection: '1',
        // 複数選択モードで選択できる写真の最大数です。
        maxSelect: 6
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
        alert('takePhoto success: ' + JSON.stringify(e));
}, function(e) {
        alert('takePhoto failure: ' + JSON.stringify(e));
});