文档章节

zepto+html5+php实现h5上传头像(移动端)上

leona_lily
 leona_lily
发布于 2015/04/02 10:59
字数 944
阅读 2923
收藏 4
	需求:实现头像上传(包含图片本地上传和调用摄像头来拍照上传),上传的头像要经过处理,比如放大,缩小,固定区域裁剪功能;
	流程:图片裁剪之前要先压缩,因为是两个页面之间进行的,所以要先通过php来存储经过压缩处理的图片的src,之后传上裁剪页面的固定的图片位置,在对这张进行相关的裁剪操作;
	时间:一个星期,浏览器兼容等等很多问题导致截图位置总是有偏差,放大就更明显了

1、调用本地文件和摄像头:

  • 之前的想法和写法 调用本地的文件使用file文件流 html:
<html><h1>选择图片:<input type="file" id="browseFile" onchange=""><input      
   	type="button" id="saveimg" value="保存图片" /></h1></html

js:

 var input_browseFile = document.getElementById("browseFile"); 
						   input_browseFile.addEventListener("change", function () {  
						        //通过 this.files 取到 FileList ,这里只有一个  
						        previewInImage(this.files[0]);  
					      }, false); 
					      function previewInImage (file) {  
					        //通过file.size可以取得图片大小  
					        var reader = new FileReader(); 
					        reader.onload = function( evt ){  
					            $('img').src = evt.target.result;  
					        }  
					       Options_image.imgData= reader.readAsDataURL(file);  
					    }
	调用手机摄像头的方法:通过调用摄像头之后,通过video标签获取画面,然后放到canvas里面
	html: `<video id="video" autoplay=""></video>`
    js:   
 <script>
			        var video_element = document.getElementById('video');
			        if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
			                 navigator.getUserMedia('video',success, error);
			        }
			        function success(stream) {
			                 video_element.src =stream;
			        }
			        </script> 
    调用摄像头也存在很多的兼容问题,很多浏览器不支持这个人方法

②之后的想法和写法 后来用手机开始测试的时候发现,input标签可以直接调用本地文件和照相功能,唉,绕了好大个圈子,又回来了; html:

<input type="file" id="browseFile" onchange="" style="display:none">
   这一句话就可以调用手机的本地文件了,当然包含了相机

2、本地压缩图片上传 需求:首页点击头像,选择本地文件或者拍照,确定后掉转到裁剪页面,同时出现你选择的图片,因为是两个页面之间的切换,图片经过编码后不知道是问题太大的原因还是什么不能放到cookie里面,所以通过php来帮忙存储了一下,前端实现压缩过程如下: 获取图片: 这里调用了一个插件,很好用,解决了很多兼容的问题,mobileBUGFix.mini.js 之后就很好做了:注:这是别人的,稍微改了一部分;

 $.fn.localResizeIMG = function (obj) {
			var ViewHeight;
		    var ViewWidth;
		    var pLeft;
		    var pTop;
		    var base64;
		    var scale
		    this.on('change', function () {
		        var file = this.files[0];
		        var URL = URL || webkitURL;
		        var blob = URL.createObjectURL(file);
		        // 执行前函数
		        if($.isFunction(obj.before)) { obj.before(this, blob, file) };
		        _create(blob, file);
		        this.value = '';   // 清空临时数据
		    });
		    /**
		     * 生成base64
		     * @param blob 通过file获得的二进制
		     */
		    function _create(blob) {
		        var img = new Image();
		        img.src = blob;
		        img.onload = function () {
		            var that = this;
		            //生成比例
		            var w = that.width,
		                h = that.height,
		            scale = Math.max(w/$(window).width(),h/$(window).height()); 
		            if(scale>1){  
				       ViewWidth=parseInt(Math.floor(w/scale));  
				       ViewHeight=parseInt(Math.floor(h/scale));  
				    }  
				    else{  
				       ViewWidth=w;  
				       ViewHeight=h;  
				    }
		            //生成canvas
		            var canvas = document.createElement('canvas');
		            var ctx = canvas.getContext('2d');
		            canvas.width = ViewWidth;
					canvas.height = ViewHeight;
		            ctx.drawImage(that,0,0,ViewWidth,ViewHeight);
		            /**
		             * 生成base64
		             * 兼容修复移动设备需要引入mobileBUGFix.js
		             */ 
		            base64 = canvas.toDataURL('image/jpeg');
		
		            // 修复IOS
		          if( navigator.userAgent.match(/iphone/i) ) {
		                var mpImg = new MegaPixImage(img);
		                mpImg.render(canvas, { maxWidth: ViewWidth, maxHeight: ViewHeight, orientation: 6});
		                base64 = canvas.toDataURL('image/jpeg');
		            }
		            // 修复android
		            if( navigator.userAgent.match(/Android/i) ) {
		                var encoder = new JPEGEncoder();
		                base64 = encoder.encode(ctx.getImageData(0,0,ViewWidth,ViewHeight), obj.quality * 100 || 80 );
		            }
		            // 生成结果
		            var result = {
		                base64 : base64,
		               // clearBase64: base64.substr( base64.indexOf(',') + 1 )
		            };
		            // 执行后函数
		            obj.success(result);
		        };
		    }
		};
		页面直接这样引用上面的方法:
		$('#browseFile').localResizeIMG({  
		            //width: 500,  
		           // quality: 0.8,  
		            success: function (result) {  
		                var img = new Image();  
		                img.src = result.base64;  
		                $('form').find('input').val(img.src);
		                $('form').submit();  
		            }  
        }); 

© 著作权归作者所有

共有 人打赏支持
leona_lily
粉丝 9
博文 96
码字总数 37848
作品 0
朝阳
程序员
【腾讯Bugly干货分享】H5 视频直播那些事

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员...

腾讯Bugly
2016/08/12
158
0
身份证识别SDK开发包支持本地识别后台识别

  互联网金融不断发展,一般注册网站、注册用户信息,需要提供身份证号,手动输入身份证号不智能,可以说,这样影响了信息录入的速度及用户体验度。为了实现身份证识别SDK便捷效果,我们开...

人工智能专家刘飞
2017/08/17
0
0
H5项目常见问题及注意事项

Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一、HTML页面结构 // width 设置viewport宽度,为一个正整数,或字符串‘device-width’// height 设置viewport高度,一...

sinat_39430615
2017/10/15
0
0
腾讯H5版本《欢乐斗地主》上线,与APP端有哪些区别?

  近日,腾讯《欢乐斗地主》H5版本正式上线,用户在关注其微信公众号后,可直接在线游戏。网狐在第一时体验了该版本的游戏内容,并结合游戏功能总结了其H5版本与APP客户端的不同点,与各位...

网狐棋牌开发
2017/12/05
0
0
PHPSHE 1.7 发布,功能齐全的 B2C 商城系统

PHPSHE 1.7 发布了,更新如下: [新增]php7+版本支持 [新增]https支持 [新增]领券中心 [新增]折扣专题 [新增]拼团专题 [新增]签到有礼 [新增]虚拟商品,支持固定卡密和批量导入卡密 [新增]微...

koyshe
09/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数字转换为字符的L受哪个参数影响

我们知道,如果想把金额带上本位币,一般加上L, 比如: select to_char(salary,'L99,9999.00') from employees; 下面显示如下: SALARY TO_CHAR(SALARY,'L99, 2900 ¥2,900.00 2500 ¥2,500.00 ...

tututu_jiang
10分钟前
0
0
shell编程(告警系统主脚本、告警系统配置文件、告警系统监控项目)

告警系统主脚本 先定义监控系统的各个目录,然后再去定义主脚本,因为是分布式的,所以需要每台机器都这样做,如果事先有创建好各个目录和各个脚本,那么就可以把这些目录和脚本copy到其他机...

蛋黄_Yolks
11分钟前
0
0
SAP HANA Backup and Recovery

SAP HANA Backup and Recovery Skip to end of metadata Created by Paul Power, last modified on Nov 23, 2017 Go to start of metadata Purpose System Privileges How to Perform a Back......

rootliu
12分钟前
0
0
JVM的持久代——何去何从?

本文会介绍一些JVM内存结构的基本概念,然后很快会讲到持久代,来看下Java SE 8发布后它究竟到哪去了。 基础知识 JVM只不过是运行在你系统上的另一个进程而已,这一切的魔法始于一个java命令...

java知识分子
29分钟前
0
0
Hive和HBase的区别

hive是文件的视图,hbase是建了索引的key-value表。 先放结论:Hbase和Hive在大数据架构中处在不同位置,Hbase主要解决实时数据查询问题,Hive主要解决数据处理和计算问题,一般是配合使用。...

飓风2000
35分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部