Just a Computer Graphics Studio & My Life

現在相機與相簿 (Camera and Album)是相當基本的功能,那我們要怎樣用AngularJS來實作呢?

[Ionic][AngularJS] 相機與相簿 (Camera and Album)00001

先下載Plugin,接著引用$cordovaImagePicker和$cordovaCamera。

/**
 Theme: Camera and Album
 IDE: None
 Language: AngularJS
 Date: 106/10/17
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */
// 相簿
  $scope.getImage = function(index) {
    console.log('getImage');
    // Image picker will load images according to these settings
    var options = {
        maximumImagesCount: 1, // Max number of selected images, I'm using only one for this example
        width: 800,
        height: 800,
        quality: 80            // Higher is better
    };

    $cordovaImagePicker.getPictures(options).then(function (results) {
        // Loop through acquired images
        for (var i = 0; i < results.length; i++) {
            console.log('Image URI: ' + results[i]);   // Print image URI
        }

    }, function(error) {
        console.log('Error: ' + JSON.stringify(error));    // In case of error
    });
  };

// 相機
$ionicPlatform.ready(function () {
  $scope.getCameraImage = function(index) {
    console.log('getCameraImage');
            var options = {
                //相片質量0-100
                quality: 90,
                //返回類型:DATA_URL= 0,返回作為 base64 編碼字串。
                //FILE_URI=1,返回影像檔的 URI。
                //NATIVE_URI=2,返回圖像本機URI (例如,資產庫)
                destinationType: 1,
                //從哪裡選擇圖片:PHOTOLIBRARY=0
                //相機拍照=1,SAVEDPHOTOALBUM=2。0和1其實都是本地圖庫
                sourceType: 1,//CAMERA,
                //在選擇之前允許修改截圖
                allowEdit: false,
                //保存的圖片格式: JPEG = 0, PNG = 1
                encodingType: 0,
                //照片寬度
                targetWidth: 1500,
                //照片高度
                targetHeight: 1500,
                //可選媒體類型:圖片=0,只允許選擇圖片將返回指定 DestinationType 的參數。
                //視頻格式=1,允許選擇視頻,最終返回 FILE_URI。
                //ALLMEDIA= 2,允許所有媒體類型的選擇。
                mediaType: 0,
                //槍後攝像頭類型:Back= 0, Front-facing = 1
                cameraDirection: 0,
                //popoverOptions: CameraPopoverOptions,
                //保存進手機相冊
                saveToPhotoAlbum: true,
                //correctOrientation: true
            };

            $cordovaCamera.getPicture(options)
            .then(function(imageData) {
                // console.log(imageData);
                // $scope.picture = "data:image/jpeg;base64," + imageData;
                // $scope.picture = imageData;

            }, function(err) {
                // error
                AuthService.showAlert(err.message);
            });
  };
});

參考:Ionic – Cordova CameraCordova camera plugin example using ionic framework

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: