zepto+html5+php实现h5上传头像（移动端）上

最新推荐文章于 2021-06-07 16:39:07 发布

lilystruggle

最新推荐文章于 2021-06-07 16:39:07 发布

阅读量1.6w

点赞数 1

本文链接：https://blog.csdn.net/lilystruggle/article/details/44828613

版权

zeptolab 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

html5

1 篇文章 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();  
                    }  
        });

lilystruggle

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
zepto+html5+php实现h5上传头像（移动端）上

需求：实现头像上传（包含图片本地上传和调用摄像头来拍照上传），上传的头像要经过处理，比如放大，缩小，固定区域裁剪功能；流程：图片裁剪之前要先压缩，因为是两个页面之间进行的，所以要先通过php来存储经过压缩处理的图片的src，之后传上裁剪页面的固定的图片位置，在对这张进行相关的裁剪操作；时间：一个星期，浏览器兼容等等很多问题导致截图位置总是有偏差，放大就更明显了1、调用本地文件和
复制链接

扫一扫