移动端H5调用摄像头(选择上传图片)
<label>照相机</label>
<input type="file" id='image' accept="image/*" capture='camera'>
<br>
<label>摄像机</label>
<input type="file" id='video' accept="video/*" capture='camcorder'>
多选:
<input type="file" id="file" multiple> 在各个机型都可以点击 file 调用相册 和 摄像头拍照
1. 在老版本的安卓中,必须加上capture,否则只能调用相册
2. 在IOS中 加了capture,就只能调用摄像头不能调用相册 判断ios,如果是ios就去掉capture属性.
let info=navigator.userAgent.toLowerCases();
if(info.match(/iPhone\sOS/i)){
dom.removeAttribute("capture")
}
读取图片(fileChoose即为input)
fileChoose.change=()=>{
let file=fileChoose.files[0],
reader=new FileReader();
reader.onLoad=()=>{
img.src=reader.result
};
reader.readAsDataURL(file)
}
移动端H5调用摄像头(选择上传图片)的更多相关文章
- 摄像头调用,h5调用摄像头进行扫一扫插件备份
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS调用摄像头并上传图片到服务器
本功能只能把图片转成base64码上传,如何上传图片还没有修改出来,有兴趣的朋友弄出来了,请给我留下言,谢谢了! 直接上代码,需要的朋友直接复制就可以使用了. <!DOCTYPE html> ...
- H5 调用摄像头
WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API. 1.getUserMedia 要播放摄像头的影像,首先需 ...
- h5调用摄像头
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- JavaScripts调用摄像头【MediaDevices.getUserMedia()】
h5调用摄像头(允许自定义界面)[MediaDevices.getUserMedia()] <!DOCTYPE html> <html lang="en"> ...
- 移动端H5页面上传图片或多张图片
传统PC网页上传文件,大家都已经熟悉,这里不做介绍. 本文简单介绍移动端常用上传图片功能.灵活使用轮询或长连接可实现PC与移动端数据同步,即PC端需要上传的图片是移动拍照下来或移动端硬盘储存的,不需要 ...
- h5端呼起摄像头扫描二维码并解析
2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
- 移动端H5选择本地图片
移动端H5选择本地图片 html://input<input type="file" accept="image/*" capture="cam ...
随机推荐
- Cocos2d-JS实现的打飞机
一.前言 今天我们来讲一个最最最常见的一个小游戏--打飞机!是的,打飞机!还记得小时候在玩儿的雷电,应该是打飞机最早的样子了吧.直到现在,也有微信打飞机,全民飞机大战,全民打飞机等游戏的出现,这些游戏 ...
- Jquery 简明介绍
http://www.cnblogs.com/luotianshuai/p/5196997.html http://www.cnblogs.com/liujianzuo888/articles/568 ...
- python学习之路-day8
一.接口与归一化设计 1.什么是接口 调用某个功能的方法/方式/入口 2.为什么要用接口 接口提取了一群类共同的函数,可以把接口当做一个函数的集合. 然后让子类去实现接口中的函数. 这么做的意义在于归 ...
- onsubmit不起作用的原因
使用form表单,添加onsubmit="return check()",来实现提交前进行相关验证功能时,有时会出现js函数不起作用的情况, 此时可以检查相应的js函数check( ...
- 封装JS实现Ajax
这两天仔细理解了一下Ajax,然后整理封装了一下,如果有什么不对的地方,请指教,谢谢! AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScri ...
- ubuntu16.04下安装TensorFlow(GPU加速)----详细图文教程【转】
本文转载自:https://blog.csdn.net/zhaoyu106/article/details/52793183 le/details/52793183 写在前面 一些废话 接触深度学习已 ...
- SharePoint研究之表单登录配置
本文将演示SharePoint怎样配置表单(Form)登录,后续文章将研究 无密码登录.编程添加用户组.编程添加用户.编程添加文件夹.编程分享文件夹(权限分配)等. 知识点:SharePoint.Sq ...
- CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none 解决方法
参考:CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none 环境 主系统 OS X,虚拟机,Ubuntu 14.04 64bit. 问题描述 ...
- 2016湘潭邀请赛—Gambling
http://202.197.224.59/OnlineJudge2/index.php/Problem/read/id/1244 题意:有a个红球,b个绿球,c个黄球,先拿完a个红球一等奖,先拿完b ...
- Solidity 官方文档中文版 2_Ethereum 智能合约介绍
一个简单的智能合约 先从一个非常基础的例子开始,不用担心你现在还一点都不了解,我们将逐步了解到更多的细节. Storage contract SimpleStorage { uint storedDa ...