Just My Life & My Work

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

2017 年 10 月 22 日

現在相機與相簿 (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 Camera、Cordova camera plugin example using ionic framework。

廣告

分類：

AngularJS, Ionic, 教學

發表留言

Tagged with:

隨意留個言吧：）～

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

Gravatar
WordPress.com 標誌

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

Twitter picture

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

Facebook照片

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

取消

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚：