文档章节

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

leona_lily
 leona_lily
发布于 2015/04/02 10:59
字数 944
阅读 3007
收藏 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
博文 99
码字总数 43341
作品 0
朝阳
程序员
私信 提问
【腾讯Bugly干货分享】H5 视频直播那些事

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

腾讯Bugly
2016/08/12
158
0
H5项目常见问题及注意事项

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

sinat_39430615
2017/10/15
0
0
身份证识别SDK开发包支持本地识别后台识别

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

人工智能专家刘飞
2017/08/17
0
0
PHPSHE 1.7 发布,功能齐全的 B2C 商城系统

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

koyshe
09/06
0
0
移动端H5页面上传图片或多张图片

传统PC网页上传文件,大家都已经熟悉,这里不做介绍。 本文简单介绍移动端常用上传图片功能。灵活使用轮询或长连接可实现PC与移动端数据同步,即PC端需要上传的图片是移动拍照下来或移动端硬...

风蓝小栖
07/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

不可不说的Java“锁”事

前言 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率。本文旨在对锁相关源码(本文中的源码来自JDK 8)、使用场景进行举例,为读者介绍主流锁的知识点...

美团技术团队
20分钟前
1
0
ali oss util demo

package com.example.demo;import com.aliyun.oss.OSSClient;import com.aliyun.oss.common.utils.BinaryUtil;import com.aliyun.oss.model.*;import org.slf4j.Logger;import o......

经常把天聊死的胖子
22分钟前
1
0
Windows系统中eclipse修改字体为Courier New

背景:在eclipse修改字体时没有找到Courier New字体; 解决: 1.在计算机地址栏上输入“C:\Windows\Fonts”路径,回车打开Win10字体文件夹。查看是否有Courier New字体;如下图: 2.如果有该...

anlve
22分钟前
1
0
使用hexo做博客网站

hexo有什么用? hexo 可以把md文件生成html静态网页。 hexo官网:https://hexo.io/zh-cn/ 本地安装hexo。 npm install -g hexo-cli#生成blog(名字任意)文件夹,并且在这个文件夹里面初始化...

王坤charlie
22分钟前
2
0
RabbitMQ+PHP 教程四(Routing)用yii2测试通过

开始 在本教程中,我们将为它添加一个特性——我们将只可能订阅消息的一个子集。例如,我们只能够将关键错误消息直接指向日志文件(以节省磁盘空间),同时仍然能够打印控制台上的所有日志消...

hansonwong
27分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部