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

news/2024/11/8 17:58:21/

今天同事问我一个我之前参与的项目,由于之前只做了样式,并没有书写功能,因此同事接手后需要做一个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!!!


http://www.ppmy.cn/news/769003.html

相关文章

MUI 实现手机图片上传

由于公司自主研发APP&#xff0c;使用的是MUI框架。我做了其中头像图片上传的功能&#xff0c;在此分享下demo&#xff1b; 如有不规范处&#xff0c;请多多指教&#xff0c;互相学习。 第一次接触这个框架&#xff0c;踩了许多的坑 >_< 步骤&#xff1a;点击选择图片 →…

安卓手机如何快速把文件传输给PC端,别再用蓝牙了,用了这款软件你就会爱上它

如何快速传输文件到PC端 安卓手机如何快速分享文件到PC端&#xff0c;求求你别用传统的蓝牙连接传输了&#xff0c;太out了。蓝牙的传输速度一般在几百KB,那是相当的慢。 当然你会说用数据线不是更快吗&#xff1f; 恩&#xff0c;那如果你身边没有有数据线&#xff0c;并且你…

安卓 android原生+h5实现蓝牙打印佳博

权限private void checkPermission() {for (String permission : permissions) {if (PackageManager.PERMISSION_GRANTED ! ContextCompat.checkSelfPermission(this, permission)) {per.add(permission);}}}private void requestPermission() {if (per.size() > 0) {String…

android 兼容模式设置,天天安卓模拟器切换极速模式与兼容模式的方法

天天安卓模拟器是一款非常优秀的安卓模拟器&#xff0c;其为用户提供了一个完善的安卓模拟环境&#xff0c;帮助用户运行安卓上的游戏、应用&#xff0c;而且其为用户提供了诸多的辅助功能&#xff0c;按键操作、手柄操作、全屏、截屏等都能轻松实现&#xff0c;而这款软件最大…

js实现移动端图片预览功能--mui.previewimage.js插件

移动端要想达到图片预览&#xff0c;可以使用mui.previewimage.js插件。 以下是一个简单的案例&#xff0c;如果只是想要简单的预览效果&#xff0c;可参考下面的使用方法&#xff1a; 效果如下&#xff1a; html: <ul><li><img src"https://img1.baidu…

使用SpringBoot将手机中的照片上传到电脑

苹果手机如果想要将手机相册中照片上传到笔记本或电脑上&#xff0c;需要下载iTunes&#xff0c;需要连接到电脑&#xff0c;不太好操作&#xff1b;作为一个程序员&#xff0c;将照片上传到个人电脑其实很简单&#xff0c; 本文介绍使用SpringBoot开发一个简单的应用即可将手…

android wifi传图片,「教程」将Mac电脑上的照片无线传到安卓手机上

还在寻找Mac苹果电脑与安卓手机如何无线互传照片的方法吗&#xff1f;今天就与小伙伴们分享一种最简单的方法&#xff0c;只需下载一款锤子开发的HandShaker免费软件即可。 1.首先我们需要先安装一款软件&#xff0c;目前比较好用的而且免费的工具是&#xff1a;HandShaker&…

h5页面使用js实现图片上传(安卓用户也可拍摄、相册二选一)

思路如下&#xff1a; 使用原生input标签实现图片上传时&#xff0c;如果你的写法是如下所示: <input type"file" id"upload_file" change"fileChange($event)" style"display: none" data-type"front" > fileChang…