カメラ - SuperApp - Alibaba Cloud ドキュメントセンター

このトピックでは、WVCamera の JavaScript API について説明します。 HTML5 アプリまたはミニアプリを作成する際に、このトピックを参照できます。 WVCamera の JavaScript API を使用して、写真の撮影、写真のアップロード、複数の写真の同時アップロードを行うことができます。

WVCamera.takePhoto

カメラを呼び出して写真を撮るか、アルバムから直接写真を選択できます。写真を取得した後、ミニプログラム側で写真のアップロード機能を実現できます。

重要

iOS 11 では、Info.plist に NSPhotoLibraryAddUsageDescription キーを追加する必要があります。このキーを使用すると、アプリがユーザーのアルバムへのアクセスをリクエストする理由を記述できます。

サンプルコード:

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

入力パラメーター

[string]mode: オプション。 'camera' は写真を撮ることを示し、'photo' はアルバムから写真を選択することを示し、デフォルトは 'both' です。
[boolean]compatible: オプション。ミニアプリの表示後に true に設定する必要があります。

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

コールバックパラメーターは、コールバックメソッドを使用して渡されます。写真が取得された場合は、success コールバックが呼び出されます。写真の取得に失敗した場合、または写真の撮影操作がキャンセルされた場合は、failure コールバックが呼び出されます。

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

[string]url: アクセス URL。 URL は、<img> 要素の src プロパティで指定されます。 URL は、写真のプレビューに使用されます。
重要
この URL は実際のコンテンツ配信ネットワーク (CDN) URL ではなく、ブラウザからアクセスすることはできません。
[string]localPath: 写真のローカルパス。このパスは、写真のアップロードに使用できます。
[string]identifier: 写真の識別子。 Mtop を使用して写真をアップロードする場合、入力パラメーターの identifier パラメーターの値が返されます。 v パラメーターを '2.0' に設定してから、Mtop を使用して写真をアップロードできます。
[string]base64Data: 写真の Base64 データ。このパラメーターは、needBase64 パラメーターが true に設定されている場合にのみ有効です。 base64Data パラメーターを使用する場合は、パラメーターの値にプレフィックス data:image/png;base64, を追加します。

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

[string]errorType: エラータイプ。
[string]errorCode: エラーコード。
[string]errorMsg: エラーメッセージ。
[string]identifier: 写真の識別子。 Mtop を使用して写真をアップロードする場合、入力パラメーターの identifier パラメーターの値が返されます。 v パラメーターを '2.0' に設定してから、Mtop を使用して写真をアップロードできます。

説明

写真の撮影操作をキャンセルすると、失敗コールバックが呼び出されます。 iOS では、{ret:'HY_RET_PHOTO_CANCLE'} が唯一のコールバックパラメーターです。 Android では、{ret:'HY_FAILED'} が唯一のコールバックパラメーターです。クライアントにカメラまたはアルバムにアクセスする権限がない場合も、失敗コールバックが呼び出されます。この場合、{msg:'NO_PERMISSION'} が iOS と Android のコールバックパラメーターに含まれます。

イベントリスニング

WVPhoto.Event.takePhotoSuccess

WVPhoto.Event.takePhotoSuccess イベントは、写真が取得され、アップロードされる際にトリガーされます。この場合、JavaScript を使用してページで写真をプレビューできます。

イベントパラメーター:

[string]url: アクセス URL。 URL は、<img> 要素の src プロパティで指定されます。 URL は、写真のプレビューに使用されます。
重要
この URL は実際のコンテンツ配信ネットワーク (CDN) URL ではなく、ブラウザからアクセスすることはできません。
[string]localPath: 写真のローカルパス。このパスは、後続のアップロードプロセスで使用できます。

複数画像選択モード

説明

この機能は WindVane iOS でのみサポートされています。

アルバムから複数の写真を選択して同時にアップロードできます。この機能は WindVane iOS でのみサポートされています。写真を撮る場合は、1 枚の写真しか選択できません。 mode: 'photo' を構成してアルバムに直接アクセスすることをお勧めします。

入力パラメーター

[string]mutipleSelection: (オプション) 複数画像選択モードを使用するかどうかを指定します。このパラメーターを '1' に設定すると、複数画像選択モードが使用されます。 '0' に設定すると、複数画像選択モードは使用されません。デフォルト値: '0'。
[int]maxSelect: (オプション) 複数画像選択モードで選択できる写真の最大数。デフォルト値: 9。

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

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

[array]images: 選択した写真の配列。配列の各項目には、次のプロパティが含まれています。
- [string]url: アクセス URL。 URL は、<img> 要素の src プロパティで指定されます。 URL は、写真のプレビューに使用されます。
  重要
  この URL は実際のコンテンツ配信ネットワーク (CDN) URL ではなく、ブラウザからアクセスすることはできません。
- [string]localPath: 写真のローカルパス。このパスは、WVCamera.confirmUploadPhoto を呼び出して写真をアップロードするときに使用できます。

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

[string]errorType: エラータイプ。
[string]errorCode: エラーコード。
[string]errorMsg: エラーメッセージ。
[string]identifier: 写真の識別子。 Mtop を使用して写真をアップロードする場合、入力パラメーター identifier の値が返されます。 v パラメーターを '2.0' に設定してから、Mtop を使用して写真をアップロードできます。

重要

イベントリスニング

WVPhoto.Event.takePhotoSuccess イベントは、写真が取得され、アップロードされる際にトリガーされます。この場合、JavaScript を使用してページで写真をプレビューできます。

イベントパラメーター:

[string]url: アクセス URL。 URL は、<img> 要素の src プロパティで指定されます。 URL は、写真のプレビューに使用されます。
重要
この URL は実際のコンテンツ配信ネットワーク (CDN) URL ではなく、ブラウザからアクセスすることはできません。
[string]localPath: 写真のローカルパス。このパスは、後続のアップロードプロセスで使用でき、WindVane Android でのみ使用されます。

次のイベントは、写真が撮影された後に直接アップロードされた場合にのみトリガーされます。

WVPhoto.Event.uploadPhotoSuccess: 写真がアップロードされたことを示すイベント。このイベントは、写真がアップロードされるたびにトリガーされます。

イベントパラメーター:

[string]url: アクセス URL。 URL は、<img> 要素の src プロパティで指定されます。 URL は、写真のプレビューに使用されます。
重要
この URL は実際のコンテンツ配信ネットワーク (CDN) URL ではなく、ブラウザからアクセスすることはできません。
[string]localPath: 写真のローカルパス。このパスは、WVCamera.confirmUploadPhoto を呼び出して写真をアップロードするときに使用できます。
[string]identifier: 写真の識別子。 Mtop を使用して写真をアップロードする場合、入力パラメーター identifier の値が返されます。 v パラメーターを '2.0' に設定してから、Mtop を使用して写真をアップロードできます。

WVPhoto.Event.uploadPhotoFailed

写真のアップロードに失敗したことを示すイベント。このイベントは、写真のアップロードに失敗するたびにトリガーされます。

イベントパラメーター:

[string]errorType: エラータイプ。
[string]errorCode: エラーコード。
[string]errorMsg: エラーメッセージ。
[string]identifier: 写真の識別子。 Mtop を使用して写真をアップロードする場合、入力パラメーター identifier の値が返されます。 v パラメーターを '2.0' に設定してから、Mtop を使用して写真をアップロードできます。

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));
});