转自： http://www.54php.cn/default/150.html ，经测试已在我自己服务器上成功运行。以下为原始文章：

【Demo】HTML5 拍照上传

作者：编程浪子 • 原创• 2017.06.15• 2165次阅读

本文主要讲解手机浏览器如何拍照

为什么会有这个需求

最近做一个项目要用到拍照然后上传照片，但是网页拍照一般都是用Flash做的，而我们主要是H5页面，如果在微信里面有权限就可以通过JSSDK调起摄像头拍照的。这里我们主要说下手机端浏览器如何调起摄像头

H5如何打开摄像头

不需要特别的支持，只需要一行代码就可以了

<input id="upload" type="file" accept="image/*;" capture="camera" >

如何预览图

原理是用js获取input file的图像流，然后赋给img标签的src属性，然后再设置这个img的css，就能得到你要的效果了,代码如下

;
var demo_h5_upload_ops = {
init:function(){
this.eventBind();
},
eventBind:function(){
var that = this;
$("#upload").change(function(){
var reader = new FileReader();
reader.onload = function (e) {
that.compress(this.result);
};
reader.readAsDataURL(this.files[0]);
});
},
compress : function (res) {
var that = this;
var img = new Image(),
maxH = 300;
img.onload = function () {
var cvs = document.createElement('canvas'),
ctx = cvs.getContext('2d');
if(img.height > maxH) {
img.width *= maxH / img.height;
img.height = maxH;
}
cvs.width = img.width;
cvs.height = img.height;
ctx.clearRect(0, 0, cvs.width, cvs.height);
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataUrl = cvs.toDataURL('image/jpeg', 1);
$(".img_wrap").attr("src",dataUrl);
$(".img_wrap").show();
// 上传略
that.upload( dataUrl );
};
img.src = res;
},
upload:function( image_data ){
/*这里写上次方法,图片流是base64_encode的*/
}
};
$(document).ready( function(){
demo_h5_upload_ops.init();
} );

实例演示

地址：http://m.54php.cn/demo/h5_upload 也可以手机扫描下图

测试结果报告

手机

UC浏览器

微信

IOS

支持拍照上传

支持图库选择上上传

支持拍照上传

支持图库选择上传

Android

支持拍照上传

支持图库选择上传

不支持拍照上传

支持图库选择上传

效果图

本人IOS 系统亲自测试了UC浏览器和微信自带浏览器完美兼容

html5手机拍照上传相关推荐

html手机上传图片去除拍照,HTML5手机拍照上传
首先需要在页面添加HTML5控件 capture="camera" 这样就可以在android5.0 或则 IOS 9.0 以上直接拉起照相机,但是这些版本之下的手机只能调用相册选 ...
HTML5 实现手机拍照上传
2019独角兽企业重金招聘Python工程师标准>>> 背景:移动端H5项目,需要实现调用手机拍照,并将图片压缩上传功能. 页面样式: 上传图片有原生的方法<input typ ...
html5拍照上传 java_如何使用HTML5实现拍照上传应用
在HTML5规范的支持下,WebApp在手机上拍照已经成为可能.在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器. 1. 视频流 HTML5 The Media Capt ...
java拍照上传功能_js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: 上传部分的JS代码: $("input[type='file']").on('change ...
html5视频前端视频上传，手机拍照上传，手机录像上传
我cao,真不知道该怎么说.看图吧就是让客户点击按钮的时候可以触发到图二,手机自带的录像机.录像之后再上传. 当时的需求就是,(微信里面的)手机页面可以上传视频,也可以想图二那样.就是可以触发手机的 ...
html5 android 拍照上传,android webview使用html5 上传相册、拍照照片
本人编程新手,这次做的功能是android webview 嵌入HTML5的页面,页面中有一个标签,iOS直接就支持,但android中不支持,网上的帖子说是因为android屏蔽了文件上传功能还是怎 ...
android实现华为手机拍照上传_继续引领手机拍照华为将带来液态镜头
点击上方蓝字[安兔兔]关注我文章每天不断更! 在手机拍照方面,华为一直都处于领先地位,那么面对友商的疯狂追赶,在下一代旗舰机型上,华为要对镜头做出如何的升级才能避免自己不被超越呢? 据相关的博主爆料 ...
html5 手机录音上传源码,Html5网页JavaScript录制MP3并上传
[实例简介]后端为 asp.net [实例截图] [核心代码] Html5网页JavaScript录制MP3音频 Html5网页JavaScript录制MP3音频录制停止上传调试信息: var ...
vuejs手机拍照上传的方向旋转问题(已解决)
在用vue做移动端项目的时候. 特别是调用相机拍照的时候有些手机会旋转照片,导致拍出来是歪的, 横着的, 这里记录下怎么解决这个问题. demo 请狠狠的戳这里 ¥ https://downlo ...

html5手机拍照上传

【Demo】HTML5 拍照上传

为什么会有这个需求

H5如何打开摄像头

如何预览图

实例演示

测试结果报告

效果图

html5手机拍照上传相关推荐

最新文章

热门文章