zepto+html5+php实现h5上传头像(移动端)上
zepto+html5+php实现h5上传头像(移动端)上
leona_lily 发表于3年前
zepto+html5+php实现h5上传头像(移动端)上
  • 发表于 3年前
  • 阅读 2552
  • 收藏 4
  • 点赞 2
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 实现头像上传(包含图片本地上传和调用摄像头来拍照上传),上传的头像要经过处理,比如放大,缩小,固定区域裁剪功能;主要使用到canvas来传递图片和实现图片的截取
	需求:实现头像上传(包含图片本地上传和调用摄像头来拍照上传),上传的头像要经过处理,比如放大,缩小,固定区域裁剪功能;
	流程:图片裁剪之前要先压缩,因为是两个页面之间进行的,所以要先通过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();  
		            }  
        }); 
共有 人打赏支持
粉丝 8
博文 91
码字总数 37807
×
leona_lily
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: