Listview展示拍照图片demo示例代码

最新推荐文章于 2021-05-27 16:44:32 发布

郝振明

最新推荐文章于 2021-05-27 16:44:32 发布

阅读量522

点赞数

分类专栏： Listview的使用文章标签：普元移动平台 listview 展示拍照图片示例

本文链接：https://blog.csdn.net/haozhenming/article/details/53582364

版权

Listview的使用专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>图片展示</title>
</head>
<body>
<div width="100%" height="55" backgroundColor="#0b75db">
  <div width="100%" height="100%" vAlign="middle" hAlign="center">
    <input type="label" value="图片展示" fontSize="18" color="#ffffff" />
  </div>
  <div width="55" height="100%" id="gyspace" display="false">
    
  </div>
  <div width="70" id="xjimg" height="100%" vAlign="middle" hAlign="center" onClick="photo" >
    <input type="label" value="拍照" color="#ffffff" />
   </div>
</div>
  

<listview id="myListView" width="100%" height="100%" dividerColor="#dddddd" dividerVisible="true" >
  <template>
    <div width="100%" height="100%" layout="HBox" paddingBottom="10" paddingTop="10">
      <div width="60" height="60" marginLeft="10" marginRight="10" vAlign="middle" hAlign="center" >
        <img width="60" height="60" tag="icon"/>
      </div>
      <div width="100%" height="60" layout="VBox">
        <div width="100%" marginTop="10">
          <input type="label" value="经度：" fontSize="14"/>
          <input type="label" value="" fontSize="14" tag="gpsx"/>
        </div>
        <div width="100%" marginTop="5">
          <input type="label" value="纬度：" fontSize="14"/>
          <input type="label" value="" fontSize="14" tag="gpsy"/>
        </div>
      </div>
    </div>
  </template>
</listview>

</body>
<script> 
  
  
  var items = new Array();
  
  //应该先对listview进行设置数据源
  myListView.setItems([]);
  myListView.reloadData();
  //创建文件夹保存压缩图片
  var file=new $M.File("sd://普元信息图片/");
  createFile();
  function createFile(){
    
    if(file.exists()==false){
      var result = file.mkdirs();
      log(result==true?'创建成功':'创建失败');
    }else{
      log('目录已经存在');
    }
  }
  
  var index = 0;
  
  //拍照----
  function photo() {
    util.startCamera("photo",null,"high",function(url) {            
            
            var time = Date.parse(new Date());
            //压缩图片的方法，第一个参数是要压缩的路径，第二个参数是目标宽度（通过调整宽度可以改变图片的大小），第三个参数是存储路径
            var path = Utils.zipImage(url,"100", "sd://普元信息图片/"+time+index+".png");
            log(path)
            
            var itemsData = new Array();
      var item = {};
      item.icon = path;
      item.gpsx = "0";
      item.gpsy = "0";
      itemsData.push(item);
      
      //应使用appendItems去追加数据，使用setItems去追加数据，很耗性能
      myListView.appendItems(itemsData);
      myListView.reloadData(); 
      index ++;
    });
  }
</script>
</html>