Web调用安卓,苹果手机摄像头,本地图片和文件

简介:

由于要给一个客户做一个记账WAP,里面有调用手机拍照功能,这里记录一下,以供需要的朋友,下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,我测试过QQ浏览器,Chrome,Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。


[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <!DOCTYPE HTML>  

  2. <html>  

  3. <head>  

  4.     <title>上传图片</title>  

  5.     <meta charset="utf-8">  

  6. </head>  

  7. <body>  

  8.     <iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>  

  9.     <form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">  

  10.   

  11.         <div>  

  12.             <div>  

  13.                 <input type="file" name="file_head" id="file_head" onchange="javascript:setImagePreview();" />  

  14.             </div>  

  15.             <div>  

  16.                 <div id="DivUp" style="display: none">  

  17.                     <input type="submit" data-inline="true" id="BtnUp" value="确认上传" data-mini="true" />  

  18.                 </div>  

  19.             </div>  

  20.         </div>  

  21.     </form>  

  22.     <div data-role="fieldcontain">  

  23.         <div id="localImag">  

  24.             <img id="preview" width="-1" height="-1" style="display: none" />  

  25.         </div>  

  26.     </div>  

  27.           

  28.   

  29.     <script type="text/javascript">  

  30.         function setImagePreview() {  

  31.             var preview, img_txt, localImag, file_head = document.getElementById("file_head"),  

  32.             picture = file_head.value;  

  33.             if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确,请重新选择!"),  

  34.             !1;  

  35.             if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",  

  36.                 preview.style.width = "63px",  

  37.                 preview.style.height = "63px",  

  38.                 preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);  

  39.             else {  

  40.                 file_head.select(),  

  41.                 file_head.blur(),  

  42.                 img_txt = document.selection.createRange().text,  

  43.                 localImag = document.getElementById("localImag"),  

  44.                 localImag.style.width = "63px",  

  45.                 localImag.style.height = "63px";  

  46.                 try {  

  47.                     localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",  

  48.                     localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt  

  49.                 } catch(f) {  

  50.                     return alert("您上传的图片格式不正确,请重新选择!"),  

  51.                     !1  

  52.                 }  

  53.                 preview.style.display = "none",  

  54.                 document.selection.empty()  

  55.             }  

  56.             return document.getElementById("DivUp").style.display = "block",  

  57.             !0  

  58.         }  

  59.     </script>  

  60. </body>  

  61. </html>  


服务器端程序自己加,如果自己没有服务器也可以调用http://jwzhangjie.com/preview.html来做测试


下面是调用几个浏览器的测试效果:

Chrome浏览器效果:


QQ浏览器效果:


拍照效果:













本文转自ljianbing51CTO博客,原文链接:http://blog.51cto.com/ljianbing/1607033 ,如需转载请自行联系原作者



相关文章
|
3月前
|
数据采集 Web App开发 API
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口,访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie,提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程,涵盖代理设置、浏览器模拟及数据提取,并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
160 15
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
|
6月前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
970 4
|
7月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
259 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
6月前
|
存储 编解码 算法
发到朋友圈的图片为什么会变糊?iPhone的live实况图是什么格式的图片?
本文介绍了iPhone Live实况图的格式(.livp)、社交平台图片变糊的原因、图像编码压缩的基本过程(变换、量化、熵编码),以及HEIF格式及其与HEVC的关系。HEIF格式具有体积小、颜色丰富、内容灵活等优势,适用于高效图像存储与传输。
|
7月前
|
Ubuntu Linux Android开发
termux+anlinux+Rvnc viewer来使安卓手机(平板)变成linux服务器
本文介绍了如何在Android设备上安装Termux和AnLinux,并通过这些工具运行Ubuntu系统和桌面环境。
872 2
termux+anlinux+Rvnc viewer来使安卓手机(平板)变成linux服务器
|
6月前
|
安全 搜索推荐 Android开发
Android vs. iOS:解锁智能手机操作系统的奥秘####
【10月更文挑战第21天】 在当今这个数字化时代,智能手机已成为我们生活中不可或缺的伙伴。本文旨在深入浅出地探讨两大主流操作系统——Android与iOS的核心差异、优势及未来趋势,帮助读者更好地理解这两个平台背后的技术哲学和用户体验设计。通过对比分析,揭示它们如何塑造了我们的数字生活方式,并展望未来可能的发展路径。无论您是技术爱好者还是普通用户,这篇文章都将带您走进一个充满创新与可能性的移动世界。 ####
195 3
|
7月前
|
Web App开发 Android开发
利用firefox调试安卓手机端web
该教程详细介绍如何通过Firefox浏览器实现手机与电脑的远程调试。手机端需安装最新版Firefox,并按指定步骤设置完成;电脑端则需安装15版及以上Firefox。设置完成后,通过工具栏中的“远程调试”选项,输入手机IP地址即可连接。连接确认后,即可使用电脑端Firefox调试器调试手机上的Web信息。注意,调试前手机需提前打开目标网页。
261 2
|
7月前
|
Android开发 iOS开发 UED
安卓与iOS的较量:谁才是智能手机市场的王者?
本文将深入探讨安卓和iOS两大智能手机操作系统之间的竞争关系,分析它们各自的优势和劣势。通过对比两者在市场份额、用户体验、应用生态等方面的表现,我们将揭示出谁才是真正的市场领导者。无论你是安卓粉丝还是iOS忠实用户,这篇文章都将为你提供一些有趣的观点和见解。
|
8月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
136 13
|
8月前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等