|
|
通過(guò)手機(jī)調(diào)用攝像頭拍照把圖片存儲(chǔ)到云端storage里，再通過(guò)頁(yè)面viewpic.php來(lái)瀏覽所有的圖片。
<div >
<button id="snap" >拍照上傳</button>
<button id="viewpic" >查看全圖</button>
</div>
viewpic.php文件源碼
<!DOCTYPE HTML>
<HTML>
<head>
<title>查看云端storage里cardpic文件夾所有圖片文件</title>
<meta http-equive="content-type" content="text/html" charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
div{margin:5px 8px;border:1px solid red;float:left;}
img{width:128px;height:96px;border:1px solid blue;margin:3px 3px 3px 3px; vertical-align:middle;}
body{margin:10px 25px ;border:1px solid blue; vertical-align:middle;}
</style>
</head>
<body>
<?php
$mystorage = new SaeStorage();
$domain = 'file';
$path = "cardpic"; //子文件夾
$num = 0;
while ( $ret = $mystorage->getList($domain,$path,100,$num))
{
foreach($ret as $file)
{
$url = $mystorage->getUrl($domain,$file);
echo "<div><a href='$url' target='_blank'><img src='$url' /></a></div> ";
$num ++;
}
}
?>
</body>
</HTML>
瀏覽器運(yùn)行效果：
為了點(diǎn)擊上述縮略圖，出現(xiàn)全屏大圖，只要把viewpic.php中
echo "<div><a href='$url' target='_blank'><img src='$url' /></a></div> "; //在微信中顯示大圖效果不居中
改為
echo "<div><a href='viewlargepic.php?url=$url' target='_blank'><img id='img' class='min' src='$url' /></a></div> ";
就可以了。
viewlargepic.php源碼 <!DOCTYPE HTML>
<HTML>
<head>
<title>全屏顯示大圖片</title>
<meta http-equive="content-type" content="text/html" charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
div{margin:50px auto;border:1px solid none; vertical-align:middle;text-align:center;}
img{width:98%;height:auto;border:1px solid red;margin:50px auto; vertical-align:middle;}
body{margin:0px auto ; vertical-align:middle;}
</style>
</head>
<body>
<?php
$url1 = $_REQUEST['url'];
if(isset($url1)){
echo "<div><img src='$url1' target='_blank'/></div> ";
}
?>
</body>
</HTML>
|
|
