文档章节

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

leona_lily
 leona_lily
发布于 2015/04/02 10:59
字数 944
阅读 2790
收藏 4
点赞 2
评论 0
	需求:实现头像上传(包含图片本地上传和调用摄像头来拍照上传),上传的头像要经过处理,比如放大,缩小,固定区域裁剪功能;
	流程:图片裁剪之前要先压缩,因为是两个页面之间进行的,所以要先通过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
博文 91
码字总数 37848
作品 0
朝阳
程序员
【腾讯Bugly干货分享】H5 视频直播那些事

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

腾讯Bugly ⋅ 2016/08/12 ⋅ 0

身份证识别SDK开发包支持本地识别后台识别

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

人工智能专家刘飞 ⋅ 2017/08/17 ⋅ 0

H5项目常见问题及注意事项

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

sinat_39430615 ⋅ 2017/10/15 ⋅ 0

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

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

网狐棋牌开发 ⋅ 2017/12/05 ⋅ 0

微信H5视频抓娃娃,没你想的那么难,看完你也会

短短两周时间,在线抓娃娃从一个默默赚钱的行业变成了风口行业,从硬件到软件架构、从盈利到投资、从运营到推广,全方位解读都有了。唯独H5抓娃娃(特指移动web、微信抓娃娃),仍然很神秘。...

Agora ⋅ 2017/11/29 ⋅ 0

移动端web无刷新上传图片【兼容安卓IOS】

博客已转移到:PHP博客

3147972 ⋅ 2014/09/11 ⋅ 0

前端屏幕适配的总结

1.web app变革之rem(http://isux.tencent.com/web-app-rem.html) 2.移动前端自适应解决方案和比较(http://caibaojian.com/mobile-responsive-example.html) 3.前端开发终端适配方案(http://w......

IT追寻者 ⋅ 2016/08/03 ⋅ 0

html5实现DisuzX论坛手机版ucenter头像修改

discuz的手机版是没有自带头像上传的功能,而pc版是用flash实现的上传,不能直接用于手机版。 首先先分析一下pc版的头像修改原理,通过抓包,提取了保存头像的url: http://bbs.xxx.com/ucs...

JohanZ ⋅ 2016/01/25 ⋅ 0

Android 4.4 WebView实现WebSocket即时通讯

参考博客 Android HTML5多线程&本地缓存&文件上传 Websocket协议的学习、调研和实现 Android版本要求及H5 api支持情况 在Android版本4.4之前,由于维护和开发Android版本时使用的是AppleWebk...

IamOkay ⋅ 2016/03/21 ⋅ 4

移动动态化方案在蜂鸟的架构演进(含React Native与Weex对比)

当下,移动动态化已经成为各大公司都回避不了的问题,产品的快速迭代对技术提出了更高的要求,而移动端的动态化方案也是层出不穷:Hypid、结构化 Native View、React Native、Weex,什么样的...

雪夜凋零 ⋅ 2017/08/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

高并发之Nginx的限流

首先Nginx的版本号有要求,最低为1.11.5 如果低于这个版本,在Nginx的配置中 upstream web_app { server 到达Ip1:端口 max_conns=10; server 到达Ip2:端口 max_conns=10; } server { listen ...

算法之名 ⋅ 今天 ⋅ 0

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部