唉,都是摄像头惹的祸 :-(-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

唉,都是摄像头惹的祸 :-(

简介: 上传代码 适配 自动化 完整代码 测试 Android端 上传 上传结果 Iphone 上传 上传结果 服务器端情况 总结 先上个福利图 :) 首先说一下,写这篇博客的原因。

先上个福利图 :)

镇楼图

首先说一下,写这篇博客的原因。大致可为以下几点:

  • 新买的android手机掉在了地上,摄像头摔得不能聚焦了,卖家还不给维修 :(
  • 手头有一个老旧的Iphone,然而不会IOS开发,所以决定使用网页形式来替代
  • 写博客需要一些手绘的流程图或者示意图,而电脑上的作图工具用起来不是很顺手。

    综合上面的原因,就为自己写了一个解决没有高清照片问题的php网页,用来转储Iphone拍摄的照片,用于博客的书写。


上传代码

正好博主本人电脑上配置好了PHP+Apache+MySQL的环境,当然了。使用Java或者Python或者其他的语言也是可以的,配置好相关的环境就可以了。

为了尽可能使这次的工作量最少,最简单,这里使用了PHP作为了我的开发语言。另本次试验的核心是图片的转储,于是也没有添加数据库的上传记录,这些东西也就是自己用,实际的开发中,各方面都得做的完善一点,谨慎一点的。

<?php

header("Content-Type:text/html;charset=utf-8");
$path = "F:/phpimage/";

$imgtype=$_REQUEST['imgtype'];

$rand_number = rand(1,100000);
$server_name = $imgtype=="notgif"?$path."$rand_number".".png":$path."$rand_number.".$imgtype;

if($_FILES['photo']['error']>0){
    die("上传文件出错了!".$_FILES['photo']['error']); 
}

if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){
  echo '<br><br><span class="label label-success">上传成功</span>';
  //header("location:./upimg.php");
}else{
 echo '<br><br><span class="label label-danger">上传失败</span>';
  //header("location:./upimg.php");
}
?>

这里就简单的让用户决定自己上传的文件,博主有时候写博客经常会用到gif图,所以单纯的将文件转储为png,那是不够的。于是我就添加了一个gif图上传的选项。至于其他类型的图片,全部一棍子“打死”,转成png图片类型即可。

适配

由于博主是为了自己图片转储的需要,所以该网页工作的主要是在手机上。那么问题就自然的来了,那就是PC版的网页在手机上显示的话会很丑。

为了让博主自己使用起来也稍微的愉悦一点,做点手机端的适配也是很有必要的啦。

同样的,为了简便。博主使用了Bootstrap来制作前端界面了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>上传图片</title>
<style>
    div {
        width:88%;
        height:auto;
        background:silver;  
    }

    input label{
        width:100%;
        height:auto;    
    }
</style>
</head>

<body>

<div class="container-fluid">
   <h1><marquee behavior="alternate"  class="label label-info">上传图片吧</marquee> </h1>
    <form role="form" action="./upimg.php" method="post" enctype="multipart/form-data">
        <input class="btn btn-default"  type="file" name="photo"  /><br/><br />
        <div class="form-group">
        <label class="label label-warning">图片类型</label>
        <input type="radio" name="imgtype" value="notgif" checked="checked">非gif图&nbsp;&nbsp;
        <input type="radio" name="imgtype" value="gif" />gif图<br />
        <br/>
        </div>
        <br />
        <input class="btn btn-default" style="background:#C6C" type="submit" value="上传图片"/>
    </form>

</div>

</body>
</html>

其实html代码和php代码是写在一个文件中的,待会博主还会贴出全部的代码。

自动化

刚才博主已经提到了,网页主要是工作在手机端的,那么自然的我们就不能采用单纯的PC端使用的localhost了。那么怎么实现呢?

答案就是使用IP进行连接。形如:

http://192.168.56.245/upimg.php

在进行手机端测试的时候,博主每次都需要到电脑的命令行下手动的输入
ipconfig /all
然后用鼠标往上翻,找到无线适配那一块,如下:

无线局域网适配器 无线网络连接:

   连接特定的 DNS 后缀 . . . . . . . : dlut.edu.cn
   本地链接 IPv6 地址. . . . . . . . : fe80::1d9f:d97b:fd16:1f6f%12
   IPv4 地址 . . . . . . . . . . . . : 192.168.56.245
   子网掩码  . . . . . . . . . . . . : 255.255.252.0
   默认网关. . . . . . . . . . . . . : 192.168.56.1

唉,每次都要这么麻烦,博主也是忒懒,于是就想写个程序来一键获取本机的IP地址,然后就会方便很多了。

说到这里,博主想了不少方法,Java啊,C语言,C++, Python,甚至C#写个界面什么的,但是为了保持博主一贯的优雅,简洁(其实是懒惰)的风格,博主还是采用了最为基础的方式,那就是写一个批命令的脚本,来一键获取本机的IP地址。

代码也比较简单,就是对命令中的返回结果的过滤。

@echo off
for /f "tokens=4" %%a in ('route print^|findstr 0.0.0.0.*0.0.0.0') do (
 set IP=%%a
)
echo %IP%
pause

一键获取本机IP

完整代码

首先是upimg.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>上传图片</title>
<style>
    div {
        width:88%;
        height:auto;
        background:silver;  
    }

    input label{
        width:100%;
        height:auto;    
    }
</style>
</head>

<body>

<div class="container-fluid">
   <h1><marquee behavior="alternate"  class="label label-info">上传图片吧</marquee> </h1>
    <form role="form" action="./upimg.php" method="post" enctype="multipart/form-data">
        <input class="btn btn-default"  type="file" name="photo"  /><br/><br />
        <div class="form-group">
        <label class="label label-warning">图片类型</label>
        <input type="radio" name="imgtype" value="notgif" checked="checked">非gif图&nbsp;&nbsp;
        <input type="radio" name="imgtype" value="gif" />gif图<br />
        <br/>
        </div>
        <br />
        <input class="btn btn-default" style="background:#C6C" type="submit" value="上传图片"/>
    </form>

</div>
<?php

header("Content-Type:text/html;charset=utf-8");
$path = "F:/phpimage/";

$imgtype=$_REQUEST['imgtype'];

$rand_number = rand(1,100000);
$server_name = $imgtype=="notgif"?$path."$rand_number".".png":$path."$rand_number.".$imgtype;

if($_FILES['photo']['error']>0){
    die("上传文件出错了!".$_FILES['photo']['error']); 
}

if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){
  echo '<br><br><span class="label label-success">上传成功</span>';
  //header("location:./upimg.php");
}else{
 echo '<br><br><span class="label label-danger">上传失败</span>';
  //header("location:./upimg.php");
}
?>
</body>
</html>


然后是一键获取本机IP的代码:

@echo off

echo "当前,您的电脑所在的局域网内的IP地址为:"


for /f "tokens=4" %%a in ('route print^|findstr 0.0.0.0.*0.0.0.0') do (
 set IP=%%a
)
echo %IP%
pause

最后一个pause不能少,除非你想看到一个黑色的框框一闪而逝 :-)

测试

Android端

上传

  • 选择好一张图片,待上传。

选择号文件待上传

上传结果

  • 上传完毕

上传完毕

Iphone

Iphone端的适配就比较简单了,毕竟种类有限嘛。

上传

iphone上传待完成

上传结果

Iphone上传完成结果

服务器端情况

最后,来查看一下。服务器端有没有上传完成的图片信息。可以看到本次试验上传的所有的图片,而且如果上传的图片为gif图的话,也是可以直接可以满足的,图片的质量并没有被损坏。 :-)

服务器端图片库

总结

经过了本次试验,博主也明白了一个道理,那就是“工具都是被懒逼着创造出来的”。 不管怎样,也算是复习了一些基础性的知识,外加一点点的应用吧。

基础知识是今后进步的源动力,不该忽视的干粮。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章