摘要:本文将带你了解WEBAPP开发之webApp调用手机相机 并且预览,希望本文对大家学WEBAPP有所帮助。
本文将带你了解WEBAPP开发之webApp调用手机相机 并且预览,希望本文对大家学WEBAPP有所帮助。
调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的,
每当看到这块功能的时候,前端的小伙伴就得去找各种各样的插件。除非你收藏了什么好东西,或者是你收藏了什么比较旧的、需求跟不上的好东西,需求不一样体验不好 那你提交了,产品经理会买你账吗?
好了,咱入正题!
这里主要是针对手机端页面或者webApp的,pc端页面效果欠佳(有时候点击选择按钮,弹框要等你上完厕所才能弹得出来)
这里分两块代码,分别为 html 和 js
HTML
<input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera"/>
<img src="" id="img"/>
# 解析
# accept 属性(允许上传两种文件类型:gif 和 jpeg)
# capture 捕获到系统默认的设备,有三个参数值可设置 camera--照相机; camcorder--摄像机; microphone--录音
# js代码我做了封装, 参数一表示 "选择文件" 的 id,参数二表示 "显示图片" 的 id,
# 若是 ios 只能调用摄像头,不能选择打开相册的话,就把这个【capture="camera"】去掉,直接加一个属性 multiple
js
var upload = function(c, d){
"use strict";
var $c = document.querySelector(c),
$d = document.querySelector(d),
file = $c.files[0],
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
$d.setAttribute("src", e.target.result);
};
};
# 解析
# 参数在上面 HTML 就已经讲解了,
# file 表示你选中的那个图片,然后它里面有几个属性 name、size、type、slice等,也都非常实用,
# FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
# 调用 FileReader 的 readAsDataURL 接口,将启动异步加载文件内容,通过给 reader 监听一个 onload 事件,
# 将数据加载完毕后,在onload事件处理中,通过 event 的 result 属性即可获得文件内容,然后扔进 img 的 src 即可 打开图片并预览。
这个对于前端来说是非常实用的,
不过点击选择文件这个按钮选择系统文件的时候弹出的操作菜单,是依赖你所使用的浏览器的,建议还是用 微信 来测试(最佳),而如果你刚好要弄微信端的页面,
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号