图片上传前压缩 lrz库

之前手机微信端的项目因为图片太大导致体验十分不流畅，后来采用把上传的图片统一压缩大小后解了燃眉之急。

但这个方法的遗憾就是得等到图片上传后在服务器端压缩，用户如果上传比较大的图片耗时太大，而且也耗流量。

关键是在用户上传前就把图片压缩了，如今找到了解决方法；

用了lrz这个库，http://www.jq22.com/jquery-info3419，感谢这个地址

平常手机照片2M的图一般能压缩到150kb左右，效果明显

首先引入三个库文件

<script type="text/javascript" src="__TMPL__Vote/assets/js/mobileFix.mini.js" ></script>
<script type="text/javascript" src="__TMPL__Vote/assets/js/exif.js" ></script>
<script type="text/javascript" src="__TMPL__Vote/assets/js/lrz.js" ></script>

根据项目的不同使用不同的引入地址

<input id="uploaderFile0" name="img[]" type="file"  data-add="0" onchange="changeFile(this)"/>

input:file框中使用时间onchang来触发压缩

var input = document.querySelector('input');
    lrz(obj.files[0], { 350}, function (results) {
            // 你需要的数据都在这里，可以以字符串的形式传送base64给服务端转存为图片。
            console.log(results);
            $("#img64base").val(results.base64);
             $(obj).remove();
        });

压缩后是base64字符串，把该字符串放到一个隐藏的input里，提交时只提交该字符串，删除input:file；

<input type="hidden" name="img64base[]" id="img64base0" value="" />

多文件提交的是数组img64base

php对传过来的字符串处理如下（多文件）

if($_POST['img64base'][0] !=""){
            
            //保存base64字符串为图片
            //匹配出图片的格式
            foreach($_POST['img64base'] as $k=>$v){
                if (preg_match('/^(data:s*image/(w+);base64,)/', $v, $result)){
                  $type = $result[2];
                  $name=$this->fast_uuid();//图片的命名函数
                  $new_file = "Public/Mun/vote/{$name}.{$type}";
                  if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $v)))){
                    //echo '新文件保存成功：', $new_file;
                    $data['add_img'][$k] = $name.'.'.$type; 
                  }
                }
            }
            $_POST['img']=implode('，',$data['add_img']);
        }else{
            //$_POST['img']="";
            $this->error('至少上传一张图片!');
        }

注意这个地方就能看懂

上传过来的字符串前面多了data:image/jpeg;base64, 这几个字，去掉之后才能使用base64_decode函数转换成图片内容，然后用file_put_contents函数把图片能容放进一个图片文件里，注意图片的后缀名也是从data:image/jpeg;base64中获取的；

fast_uuid()是图片的命名函数，从网上找的，如下

/*
* 参数 suffix_len指定 生成的 ID 值附加多少位随机数，默认值为 3。
* 感谢“Ivan Tan|谭俊青 DrinChing (at) Gmail.com”提供的算法。
* @param int suffix_len
* @return string
*/
private function fast_uuid($suffix_len=3){
        //! 计算种子数的开始时间
        $being_timestamp = time();

        $time = explode(' ', microtime());
        $id = ($time[1] - $being_timestamp) . sprintf('%06u', substr($time[0], 2, 6));
        if ($suffix_len > 0)
        {
            $id .= substr(sprintf('%010u', mt_rand()), 0, $suffix_len);
        }
        return $id;
    }