IONIC App-水平,可滚动的缩略图滑块

时间:2016-11-08 08:38:56

标签: angularjs ionic-framework angularjs-scope

有一份订单清单。当我们点击>(右侧雪佛龙详细信息选项)时,它会将我重定向到订单详细信息页面。订单详细信息页面可能包含一个人订购的商品列表。每个项目都有相机选项来点击图片。

假设有两个项目,每个项目都有一个相机选项,所以我们将点击两张图片 - 每个项目一个。并且,我想在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);

})

1 个答案:

答案 0 :(得分:0)

默认情况下,ionic会将所有图像保存在缓存目录中。 我在项目中做了什么,我将使用移动文件功能将文件从缓存目录移动到带有filemanager插件的SdCard。我正在SQL表中记录包括图像名称和路径的记录,所以每当我需要从表中加载记录时。

var machin;
$.post( '/room/testroom', function( data ) {
     machin = JSON.parse(data);
     return True;
})