直接写
<input type="file" accept="image/png,image/jpg">
这样的格式只能通过文件管理器选择图片
当需要实现手机拍照上传的时候,需要多加一个属性
capture=”camera”
<input type="file" accept="image/png,image/jpg" capture="camera">
当需要实现直接选择相册或者sd卡上的相片的时候需要将
accept的属性设置成image/*
,如果需要对图片格式进行判断,可以再上传的时候进行
<input type="file" accept="image/*">
此外,安卓手机上可以同时使用上述两个属性,实现拍照和选择照片两个功能,但是苹果手机会直接调用手机的拍照功能,不能调用选择图片这一项
移动端h5
实现
手机
拍照
上传
图片
,
相册
选择
上传
图片
input
type
=
file
移动端h5
实现
相册
批量
选择
上传
图片
input
multiple
<
input
type
="
file
" accept="image/*">
<!--*可改为
图片
类型,如jpg,png等,中间用逗号隔开,image/ jpg,image/png--->
<!--*调用摄像头--->
<
input
type
="
file
" accept="image/*" capture="camera&q
使用 image/* 也会打开
相机
,需要指定类型。
image/aces;image/avci;image/avcs;image/avif;image/bmp;image/cgm;image/dicom-rle;image/emf;image/emf;image/example;image/fits;image/g3f..
此外,如果需要在 H5 中
实现
复杂的图像处理,可以使用 JavaScript 库,例如 fabric.js、p5.js 或 Three.js。但这种方式可能会导致页面刷新。使用 WebRTC API
实现
移动端 H5
拍照
功能需要对 WebRTC API 进行深入了解,并对其进行适当的错误处理,以确保在不同的浏览器和移动设备上正常工作。通过 WebRTC 技术
实现
摄像头的访问,即通过 HTML5 规范中的 MediaDevices.getUserMedia() API 访问摄像头,并
实现
拍照
功能。
通过
input
标签的
file
类型可以
拍照
获取
相册
数据
<
input
type
="
file
" onchange="getImgFacei(event)" style="display: none;" accept="image/*" />
//accept="image/*" 表示照片
上传
的
文件
类型 image表示任何类型
改变
file
文件
的样式
//修改
file
样式很麻烦 想把原来的
file
修改为一个照片或者啥的 可以吧
file
样式改为
//然后添加点击.
有时候我们会在微信公众号里开发会遇到
上传
图片
的功能,当你写<
input
type
="
file
"> 的时候,在IOS上可以成功调起
拍照
和图库两块,在
安卓
手机上只能调取图库而没有
拍照
功能,解决办法:给
input
加上accept属性<
input
type
="
file
" accept="image/*" /> //调用
相机
,
图片
或者
相册
(两者都行)
加上了capture=...
// ios与
安卓
网页调用
<
input
id="upload_
file
"
type
="
file
" class="
file
-
input
" accept="image/png,image/jpeg,image/jpg"/>
//
安卓
微信内调用
<
input
id="upload_
file
2"
type
="
file
" class="fil