显示在应用的界面上

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们再去改进一下这个应用,当选择图片以后,让图片直接显示在应用的界面上 … 回到应用项目… 打开 index.html …

先来为要显示的图片添加一个容器 … 可以使用

标签 … 在上面定义一个 ID … 叫它 imagecontainer

待会儿我们可以把图片显示在这个容器里面 ..

在没有图片显示的时候,可以隐藏这个容器 … 添加一个 style 属性 … style="display:none"

保存一下,再打开 index.js ..

index.js

在获取照片成功以后要做的事情这里 … 先找到图片的容器 … document.getElementById('imagecontainer');

把它交给一个变量 … 命名为 imageContainer … var imageContainer =

下面我们去创建一个 img 元素 .. 把这个元素的 src 属性的值设置成获取到的图片的路径 …

再把这个 img 元素添加到图片容器里面 … 然后再设置图片容器的 display 属性,让它显示出来 ..

var imageEntity = document.createElement("img");
imageEntity.src = imageData;
imageContainer.appendChild(imageEntity);
imageContainer.style.display = "block";

保存一下这个文件 …

index.css

为了让图片的宽度跟包装它的容器的宽度一样 .. 可以再去添加点样式 … 打开 www 下面的 css 目录下面的 index.css

添加一个 img{width:100%} … 把 img 标签的宽度设置成 100% … 保存 ...

演示

再重新编译并且安装一下修改以后的应用 .. phonegap run --emulator ios

点击选择图片 … 在相册里,找到一张要使用的图片 … 选择 ….

回返回到应用 … 在应用的界面上 … 会直接显示出刚才选择的图片 ….

显示在应用的界面上《 PhoneGap 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点