当前位置:   article > 正文

html实现调取手机相机进行拍照上传——技能提升_拍照上传的插件 html

拍照上传的插件 html

今天同事问我一个我之前参与的项目,由于之前只做了样式,并没有书写功能,因此同事接手后需要做一个html实现手机拍照上传的功能:

在这里插入图片描述
由于项目是一个后台管理系统,使用的是vue+ant-design的框架,因此上传图片就是用的:

在这里插入图片描述
由于现在的需求,是希望后台管理系统可以使用平板进行拍照上传图片,因此我首先想到的是通过html5实现手机拍照上传功能:

这个也是可以实现的:

下面是一个CSDN博主提供的方法:
在这里插入图片描述
博文地址:前端调用手机拍照功能:https://blog.csdn.net/fengye12zjs/article/details/53504274?locationNum=7&fps=1

主要是通过<input id="takepicture" type="file" accept="image/*" capture="camera" style="display: none">
这个标签来实现的,具体我并没有进行尝试。

另附一篇关于input标签不同type的使用方式简介的文章:

html5在手机端调用相机拍照功能:https://www.jb51.net/html5/725008.html
在这里插入图片描述
在这里插入图片描述
中午,我用手机打开了一下ant-design of vue的官网,发现其实这个upload上传组件是支持手机端拍照的,只不过需要点击下图中的照片和视频,才能进入到相册和拍照的界面,进而可以实现通过拍照或者相册选择图片的方式。

因此:直接用upload即可满足后台管理系统在电脑端和平板端的不同需求。
在这里插入图片描述
ant-design YYDS!!!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/105034
推荐阅读
相关标签
  

闽ICP备14008679号