2016-11-08 64 views
0

有一個訂單列表。當我們點擊>(右側人字形細節選項)時,它會重定向我以訂購詳細信息頁面。訂單詳情頁面可能有一個人訂購的物品清單。每個項目都有相機選項來點擊圖片。IONIC App-水平,可滾動的縮略圖滑塊

假設有兩個項目都帶有相機選項,所以我們將點擊兩張圖片 - 每個項目一個。而且,我想在div中將它們都顯示爲可滾動的縮略圖滑塊,而無需訪問手機的圖像存儲空間。我試圖以縮略圖顯示圖像,有點像使用http://ngcordova.com/docs/plugins/camera/ 的貓頭鷹carousal,現在我需要在拍攝照片後立即將它顯示爲div中的縮略圖庫。正在使用的控制器代碼與上述鏈接文檔中的代碼相同。

.controller('CameraCtrl', function($scope, $cordovaCamera) { 

    document.addEventListener("deviceready", function() { 

    var options = { 
     quality: 50, 
     destinationType: Camera.DestinationType.DATA_URL, 
     sourceType: Camera.PictureSourceType.CAMERA, 
     allowEdit: true, 
     encodingType: Camera.EncodingType.JPEG, 
     targetWidth: 100, 
     targetHeight: 100, 
     popoverOptions: CameraPopoverOptions, 
     saveToPhotoAlbum: false, 
     correctOrientation:true 
    }; 

    $cordovaCamera.getPicture(options).then(function(imageData) { 
     var image = document.getElementById('myImage'); 
     image.src = "data:image/jpeg;base64," + imageData; 
    }, function(err) { 
    // error 
    }); 

    }, false); 

}) 

回答

0

默認情況下,離子會將所有圖像保存在緩存目錄中。 我在我的項目中做了什麼,我將使用移動文件功能使用filemanager插件將圖像從緩存目錄移動到SdCard。以及我在SQL表中記錄包括圖像名稱及其路徑的記錄,所以無論何時我需要從表中加載記錄。

$scope.$on('$ionicView.beforeEnter', function (event, viewData) { 
    ImageService.LoadImages().then(function (list_images) { 
     var list = list_images; 
     angular.merge($scope.showData, list); 
    }, function (rej) { 
     console.error(rej); 
    }); 
    /* you can enter the function that you 
     want to call every time when view loads, Like above I did */ 
});