h5 调起相机_h5 调用相机、相册实现本地上传图片预览

h5 本地上传图片预览源码下载

最近做了一个项目就是上传一张自拍照，根据颜值测试出不同的答案，并且可以生成一张图片。拿到这需求的时候第一个反应就是想到了利用微信的图片上传接口，因为我们需要拿到用户真实的图片，小游戏就是为了宣传推广。

但是事与愿违，微信上传图片IOS 和安卓还有很大的区别，获取照片的url时出现问题，最后才想起来H5和js就可以实现我们的需求。搞了半天的微信最后果断放弃… …

下面我们一起看一下H5怎么实现本地上传图片预览的效果的：

//这个是一个设计的上传按钮的图片

这里就是图片生成本地url后所展示的位置

1、capture=”camera/camcorder/microphone”

使用input：file标签, 去调用系统默认相机，摄像，录音功能，其实是有个capture属性，直接说明需要调用什么功能

capture表示，可以捕获到系统默认的设备，比如：camera–照相机；camcorder–摄像机；microphone–录音。

accept表示，直接打开系统文件目录。

2、multiple

input:file标签还支持一个multiple属性，表示可以支持多选，如：

加上这个multiple后，capture就没啥用了，因为multiple是专门用来支持多选的。

下面是我们要实现上传的合本地预览的效果了

// 图片上传本地预览

window.onload = function () {

var fileTag = document.getElementById('file');

fileTag.onchange = function () {

var file = fileTag.files[0];

var fileReader = new FileReader();

fileReader.onloadend = function () {

if (fileReader.readyState == fileReader.DONE) {

document.getElementById('img').setAttribute('src', fileReader.result);

}

};

fileReader.readAsDataURL(file);

})

以上代码就可以实现最简单的H5本地上传和预览的功能了。

h5 调起相机_h5 调用相机、相册实现本地上传图片预览相关推荐

iOS学习：调用相机，选择图片上传，带预览功能
iOS学习:调用相机,选择图片上传,带预览功能发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏赞3 8月22日珠海 OSC ...
H5在微信里只能调用相机，不能调用相册
< input type="file" id="upload_image" name="uploadImage" value=&quo ...
Android Camera相机开发示例、Android 开发板 USB摄像头采集、定期拍照、定时拍照，安卓调用摄像头拍照、Android摄像头预览、监控，USB摄像头开发、摄像头监控代码
我们有个需求,在机器上加个摄像头,定时拍照: 我到网上搜索,发现没有快速上手和简单使用的: 个人感觉,大部分博客写得很乱,或者长篇大论: 而我只想简单实现功能,并不打算学习多少理论: 下面代码是我写来 ...
android自定义相机预览尺寸,相机在Android中,如何获得最佳尺寸,预览尺寸,图片尺寸,视图尺寸,图像扭曲...
混合来自OpenGL和 Android相机的视图时图像失真,以便在使用takepicture方法时获取两者的图像.我查了一下,发现相机图片设置为640X480,openGL视图和相机预览都设置为128 ...
Android拍照指定尺寸,相机在Android中,如何获得最佳尺寸,预览尺寸...
混合来自OpenGL和Android相机的视图时图像失真,以便在使用takepicture方法时获取两者的图像.我查了一下,发现相机图片设置为640X480,openGL视图和相机预览都设置为1280 ...
从零开发一款相机第五篇：Camera api1实现预览、拍照、录像功能
本课程内容由 @小驰笔记出品,欢迎关注,获取更多交流信息~ 欢迎访问个人博客:www.xiaochibiji.com 这节课,我们主要讲解如果使用camera api1接口,实现预览.拍照以及录像功 ...
java接口方式调用海康大华摄像机预览。
客户有海康和大华的监控设备,没有买各类安防平台,国标方式需要预留给其他需要接入的系统,得兼容高版本chrome,询问了大华的客服人员,最后选择了该方案进行解决,记录下曲折的过程.延迟大约10秒的样子, ...
调用海康视频接口获取预览取流的URL
开始之前请参考海康官方SDK文档鉴于前段时间刚接触视频这一块,整理了自己的一些经验,具体的你们还是参考文档来吧附上文档地址 https://open.hikvision.com/docs/docI ...
linux qt调用摄像头,Qt5下实现摄像头预览及捕获图像方法实例
Step4:修改mainwindow.cpp 源码如下 #include "mainwindow.h" #include "ui_mainwindow.h" M ...

h5 调起相机_h5 调用相机、相册实现本地上传图片预览

h5 调起相机_h5 调用相机、相册实现本地上传图片预览相关推荐

最新文章

热门文章