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

时间：2025-05-15 22:15:20

原文地址/lilystruggle/article/details/44828613

需求：实现头像上传（包含图片本地上传和调用摄像头来拍照上传），上传的头像要经过处理，比如放大，缩小，固定区域裁剪功能；
    流程：图片裁剪之前要先压缩，因为是两个页面之间进行的，所以要先通过php来存储经过压缩处理的图片的src，

之后传上裁剪页面的固定的图片位置，在对这张进行相关的裁剪操作；
    时间：一个星期，浏览器兼容等等很多问题导致截图位置总是有偏差，放大就更明显了



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

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

            js: 

 var input_browseFile = ("browseFile"); 
                           input_browseFile.addEventListener("change", function () {  
                                //通过  取到 FileList ，这里只有一个  
                                previewInImage([0]);  
                          }, false); 
                          function previewInImage (file) {  
                            //通过可以取得图片大小  
                            var reader = new FileReader(); 
                             = function( evt ){  
                                $('img').src = ;  
                            }  
                           Options_image.imgData= (file);  
                        }


调用手机摄像头的方法：通过调用摄像头之后，通过video标签获取画面，然后放到canvas里面
    html： `<video autoplay=""></video>`


JS

<script>
                    var video_element = ('video');
                    if () { // opera should use  now, chrome use webkitGetUserMedia
                             ('video',success, error);
                    }
                    function success(stream) {
                             video_element.src =stream;
                    }
                    </script> 

    调用摄像头也存在很多的兼容问题，很多浏览器不支持这个人方法

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

<input type="file"  οnchange="" style="display:none">

这一句话就可以调用手机的本地文件了，当然包含了相机


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


$. = function (obj) {
            var ViewHeight;
            var ViewWidth;
            var pLeft;
            var pTop;
            var base64;
            var scale
            ('change', function () {
                var file = [0];
                var URL = URL || webkitURL;
                var blob = (file);
                // 执行前函数
                if($.isFunction()) { (this, blob, file) };
                _create(blob, file);
                 = '';   // 清空临时数据
            });
            /**
             * 生成base64
             * @param blob 通过file获得的二进制
             */
            function _create(blob) {
                var img = new Image();
                 = blob;
                 = function () {
                    var that = this;
                    //生成比例
                    var w = ,
                        h = ,
                    scale = (w/$(window).width(),h/$(window).height()); 
                    if(scale>1){  
                       ViewWidth=parseInt((w/scale));  
                       ViewHeight=parseInt((h/scale));  
                    }  
                    else{  
                       ViewWidth=w;  
                       ViewHeight=h;  
                    }
                    //生成canvas
                    var canvas = ('canvas');
                    var ctx = ('2d');
                     = ViewWidth;
                     = ViewHeight;
                    (that,0,0,ViewWidth,ViewHeight);
                    /**
                     * 生成base64
                     * 兼容修复移动设备需要引入
                     */ 
                    base64 = ('image/jpeg');

                    // 修复IOS
                  if( (/iphone/i) ) {
                        var mpImg = new MegaPixImage(img);
                        (canvas, { maxWidth: ViewWidth, maxHeight: ViewHeight, orientation: 6});
                        base64 = ('image/jpeg');
                    }
                    // 修复android
                    if( (/Android/i) ) {
                        var encoder = new JPEGEncoder();
                        base64 = ((0,0,ViewWidth,ViewHeight),  * 100 || 80 );
                    }
                    // 生成结果
                    var result = {
                        base64 : base64,
                       // clearBase64: ( (',') + 1 )
                    };
                    // 执行后函数
                    (result);
                };
            }
        };
        页面直接这样引用上面的方法：
        $('#browseFile').localResizeIMG({  
                    //width: 500,  
                   // quality: 0.8,  
                    success: function (result) {  
                        var img = new Image();  
                         = result.base64;  
                        $('form').find('input').val();
                        $('form').submit();  
                    }  
        });


相关文章