H5调用手机摄像头拍照后，怎样压缩再上传？

实际的压缩功能，就是利用canvas画布功能，将图片进行裁剪后保存图片的base64数据流，然后上传。

案例全部代码，示下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>关于html5中如何调用相机拍照并且压缩图片的示例详解</title>
</head>
<body><h2>关于html5中如何调用相机拍照并且压缩图片的示例详解</h2>照相机:<input type="file" capture=camera accept="image/*"><br /><br />相册:<input type="file" accept="image/*"><script type="text/javascript" language="JavaScript">$('input[type=file]').change(function(e) {var file = this.files[0];var mime_type=file.type;var orientation=0;if (file && /^image\//i.test(file.type)) {EXIF.getData(file,function(){orientation=EXIF.getTag(file,'Orientation');});var reader = new FileReader();reader.onloadend = function () {var width,height;var MAX_WH=800;var image=new Image();image.onload=function () {if(image.height > MAX_WH) {// 宽度等比例缩放 *=image.width *= MAX_WH / image.height;image.height = MAX_WH;}if(image.width > MAX_WH) {// 宽度等比例缩放 *=image.height *= MAX_WH / image.width;image.width = MAX_WH;}//压缩var quality=80;var cvs = document.createElement('canvas');cvs.width = width = image.width;cvs.height =height = image.height;switch (orientation) {case 6:case 8:cvs.width = height;cvs.height = width;break;}var context=cvs.getContext("2d");//解决ios图片旋转问题switch(orientation){//iphone横屏拍摄，此时home键在左侧case 3:// 180度向左旋转context.translate(width, height);context.rotate(Math.PI);break;//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)case 6:context.rotate(0.5 * Math.PI);context.translate(0, -height);break;//iphone竖屏拍摄，此时home键在上方case 8:// 逆时针旋转90度context.rotate(-0.5 * Math.PI);context.translate(-width, 0);break;}context.drawImage(image, 0, 0,image.width, image.height);dataURL = cvs.toDataURL('image/jpeg', quality/100);//获取识别结果...}image.src=dataURL;};reader.readAsDataURL(file);}else{alert("只能识别图片！")}});
</script></body>
</html>

以上就是关于“ H5调用手机摄像头拍照，如何压缩后上传 ” 的全部内容。

H5调用手机摄像头拍照，如何压缩后上传相关推荐

H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头,完成拍照,实时上传(旧) 项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求. 今天,就通过一个小的案例,演示一下完整的实现流程 ...
h5调用手机摄像头获取图片用于人脸识别
h5调用手机摄像头获取图片用于人脸识别 1.安卓手机获取前置摄像头,并在video标签显示注:navigator.mediaDevices.getUserMedia文档说明兼容Safari11,实测 ...
原生html调手机拍照,如何让HTML5调用手机摄像头拍照——实践就是一切
原文:如何让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码 HTML5 Th ...
java 调用手机相册_微信公众号调用手机摄像头拍照和本地相册
[实例简介] 微信公众号调用手机摄像头拍照和本地相册,上传服务器 [实例截图] [核心代码] 微信公众号调用手机摄像头拍照和本地相册(2) └── 微信公众号调用手机摄像头拍照和本地相册 └── 微信 ...
Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传 html代码 js代码 html代码 <input type ...
html调起苹果手机摄像头_HTML5如何调用手机摄像头拍照实现方法介绍
HTML5如何调用安卓手机摄像头拍照实现方法介绍.HTML5 The Media Capture API提供了对摄像头的可编程访问,可以直接用getUserMedia获得摄像头提供的视频流.其实实际上 ...
html调起苹果手机摄像头_HTML5 调用手机摄像头拍照
一.getUserMedia API简介 getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬 ...
weUI中调用手机摄像头拍照上传
//图片上传 <div class="weui-cells weui-cells_form" style="margin-top: 0px;">&l ...

H5调用手机摄像头拍照，如何压缩后上传

H5调用手机摄像头拍照后，怎样压缩再上传？

案例全部代码，示下：

H5调用手机摄像头拍照，如何压缩后上传相关推荐

最新文章

热门文章