Compress Lrz Library before uploading pictures

Before the mobile phone project because the picture is too large to make the experience is very not smooth, and then the upload of the image of the unified compressed size after the urgent solution.

But this method of regret is to wait until the image upload in the server-side compression, if the user upload a larger picture time consuming too much, but also consumption of traffic.

The key is to compress the picture before the user uploads, and now find a solution;

Lrz This library, http://www.jq22.com/jquery-info3419, thanks for the address.

Ordinary mobile phone photos 2M picture generally can be compressed to about 150KB, the effect is obvious

Three library files are introduced first

<Scripttype= "Text/javascript"src= "__tmpl__vote/assets/js/mobilefix.mini.js" ></Script><Scripttype= "Text/javascript"src= "__tmpl__vote/assets/js/exif.js" ></Script><Scripttype= "Text/javascript"src= "__tmpl__vote/assets/js/lrz.js" ></Script>

Use different ingestion addresses depending on the project

<id= "UploaderFile0"  name= "img[]"  type= "File"    data-add= "0"  onchange= "Changefile (this)"/>

Use time Onchang in Input:file box to trigger compression

var input = document.queryselector (' input ');    Lrz (obj.files[function  (results) {            // The data you need is here, The base64 can be sent as a string to the server to dump the image.              Console.log (results);             $ ("#img64base"). Val (results.base64);             $ (obj). remove ();        });

After compression is the Base64 string, put the string into a hidden input, submit only the string, delete input:file;

<type= "hidden"  name= "img64base[]"  ID= " Img64base0 "  value=" "/>

Multiple files are submitted with an array img64base

PHP to pass over the string processing as follows (multi-file)

if($_post[' Img64base '] [0]! = ""){                        //Save the Base64 string as a picture//match the format of the picture            foreach($_post[' Img64base '] as $k=$v){                if(Preg_match('/^ (data:\s*image\/(\w+); base64,)/',$v,$result)){                  $type=$result[2]; $name=$this-fast_uuid ();//The name function of the picture$new _file= "public/mun/vote/{$name}. {$type}"; if(file_put_contents($new _file,Base64_decode(Str_replace($result[1], ",$v)))){                    //Echo ' New file saved successfully: ', $new _file;                    $data[' Add_img '] [$k] =$name.‘.‘.$type; }                }            }            $_post[' img ']=implode(‘，‘,$data[' Add_img ']); }Else{            //$_post[' img ']= "";            $this->error (' Upload at least one photo! ')); }

Note that this place can read

Upload the string in front of a lot of data:image/jpeg;base64, these words, removed before you can use the Base64_decode function to convert to picture content, and then use the File_put_contents function to put the picture into a picture file, Note that the suffix of the image is also obtained from the data:image/jpeg;base64;

Fast_uuid () is a named function of a picture, looked up from the Internet, as follows

/** Parameter Suffix_len specifies how many bits of random number are attached to the generated ID value, and the default value is 3. * Thanks to "Ivan tan| Tan Junqing drinching (at) gmail.com" provides the algorithm. * @param int suffix_len* @return string*/Private functionFast_uuid ($suffix _len=3){        //! Calculate the start time of the seed number        $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; }

Compress Lrz Library before uploading pictures