利用cropper插件裁剪本地圖片，而後將裁剪事後的base64圖片上傳至七牛雲空間

　　　如今作的項目須要作一些圖片處理，因爲時間趕急，以前我便沒有處理圖片，直接將圖片放在input[type=file]裏面，以文件的形式提交給後臺，這樣作簡直就是最低級的作法，以後各類問題便出來了，人物頭像須要正方形，這樣作不免出現異性，顯示的時候即是各類醜。

　　　項目趕完以後這兩天優化本想在網上找一個現成的圖片裁剪插件使用，可是在百度上面和jq22上面找了半天找到的都是一些服務器裁剪的事例，加上看別人的代碼各類麻煩，簡直頭大，最後發現一個本地圖片處理的插件，便想着不如本身寫一個，雖然代碼寫着亂，可是本身亂寫的也比別人好好寫的更容易懂不是。哈哈

　　cropper插件詳細api可參考如下連接 cropper本地圖片裁剪插件

　　構建html結構

　　

<div id="content">
            <form id="NewQyq">
                <div class="SeeCont">
                    <p><span style="color: red;">*</span>選擇圖片：</p>
                    <div class="SeeImg image_container">
                        <img class="myimg" src='' />
                    </div>
                    <button class="TxText xzBtn" id="imgReplaceBtn" type="button">更換圖片   </button>
                    <br />
                    base64地址：<input name="url" id="imgShowurlbase" style="width: 400px;" value="f12打開控制檯查看"  />
                    <br />
                    七牛雲地址： <input name="url" id="imgShowurl" style="width: 400px;"  />
                </div>
            </form>
        </div>

　　建立函數

function upImg(bili){
      $("#imgReplaceBtn").on("click",function(){
                                    $("body").prepend('<div class="parsetcroBox" >'
                                        +'<div class="cropperBox">'
                                            +'<h4 class="boxH4" >圖片裁剪 <a class="imgBoxBtn">選擇圖片 <input type="file" class="file_upload" /></a>  </h4>'
                                            +'<hr />'
                                            +'<div class="imgBox"><img id="preview" src="" /></div>'
                                            +'<div class="imgBoxyulan"><img id="previewyulan" src="" /></div>'
                                            +'<div class="bottomBox">'
                                                +'<button class="imgBoxBtn queding">肯定</button>'
                                                +'<button class="imgBoxBtn xuanzhuan">旋轉</button>'
                                            +'</div>'
                                         +' </button>'
                                        +'</div>'
                                    +'</div>')
                            })  
}

　　選擇圖片以後，將選擇的圖片顯示在裁剪區域，引入cropperjs包，實例化圖片裁剪方法

var upImgageToken=''    
$("body").on("change",".file_upload",function(){
                            var $file = $(this);
                            var fileObj = $file[0];
                            var windowURL = window.URL || window.webkitURL;
                            var dataURL;
                            var $img = $("#preview");
                        if(fileObj && fileObj.files && fileObj.files[0]){
                            dataURL = windowURL.createObjectURL(fileObj.files[0]);
                            $img.attr('src',dataURL);
                        }else{
                            dataURL = $file.val();
                            var imgObj = document.getElementById("preview");
                            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
                            
                    }
                        $img.cropper({
                          aspectRatio: bili ,         //1 / 1,  //圖片比例,1:1
                          crop: function(data) {
                              var $imgData=$img.cropper('getCroppedCanvas')
                              var dataurl = $imgData.toDataURL('image/png');
                              $("#previewyulan").attr("src",dataurl)
                          },
                           built: function (e) {
                            }
                        });
                        console.log(dataURL)
                        $img.cropper('replace',dataURL)
                        $(".xuanzhuan").on("click",function(){
                            $img.cropper('rotate', 90)  //圖片旋轉
                        })

                        $("body").unbind("click").on("click",".queding",function(){
                            
                            var $imgData=$img.cropper('getCroppedCanvas')
                            var dataurl = $imgData.toDataURL('image/png');  //dataurl即是base64圖片
                            console.log(dataurl)
                            $(".myimg").attr("src",dataurl)
                            $(".parsetcroBox").remove()
                            imgReplaceBtn=1
                            //下面兩種方法須要用到那種使用哪一種便可,或者都不使用直接上傳base64文件給後臺便可，哈哈
                            //putb64(dataurl)    //上傳base64圖片上傳至七牛雲方法，須要先獲取到後臺生成的上傳token
                            //blob = dataURLtoBlob(dataurl);   //將base64圖片轉化爲blob文件方法
                        })
    
                  
                    });

　　上面一個簡單的本地裁剪獲取base64圖片便已經完成，看看代碼，使用插件的狀況下仍是挺簡單的，再次不得不說，cropper插件真的強大，強烈推薦使用。

　　以上是將base64圖片上傳給後臺，後臺獲得base64圖片後還得處理一遍，因爲前兩天項目中作了將視頻上傳到七牛雲存儲空間讓七牛給咱們作處理，我便想將圖片也傳到七牛上去，獲得圖片連接以後直接傳一個連接地址給後臺存儲豈不是要簡單許多。

　　終於在七牛摸個旮旯找到了七牛雲上傳base64圖片的文檔   七牛雲上傳base64圖片sdk  上傳base圖片要比視屏處理要簡單很多，不須要引用須要js，直接使用就行，根據官方jdk改了一下以下：

 function putb64(picBase){   //七牛雲官方文檔方法
                                /*picUrl用來存儲返回來的url*/
                                var picUrl;
                                /*把頭部的data:image/png;base64,去掉。（注意：base64後面的逗號也去掉）*/
                                picBase=picBase.substring(22);
                                /*經過base64編碼字符流計算文件流大小函數*/
                                function fileSize(str) {
                                    var fileSize;
                                    if(str.indexOf('=')>0)  {
                                        var indexOf=str.indexOf('=');
                                        str=str.substring(0,indexOf);//把末尾的’=‘號去掉
                                    }
                                    fileSize=parseInt(str.length-(str.length/8)*2);
                                    return fileSize;
                                }
                                /*把字符串轉換成json*/
                                function strToJson(str) { 
                                    var json = eval('(' + str + ')'); 
                                    return json; 
                                } 
                                //http://upload-z2.qiniu.com/putb64/ 只適用於七牛雲華南空間 由於個人是七牛雲華南空間，若是不是華南空間須要根據七牛雲文檔進行更改
                                var url = "http://upload-z2.qiniu.com/putb64/"+fileSize(picBase);    
                                var xhr = new XMLHttpRequest();
                                xhr.onreadystatechange=function(){
                                    if (xhr.readyState==4){
                                        var keyText=xhr.responseText;
                                        /*返回的key是字符串，須要裝換成json*/
                                        keyText=strToJson(keyText);
                                        /* http://image.haoqiure.com/ 是個人七牛雲空間網址，keyText.key 是返回的圖片文件名*/
                                        picUrl="http://image.haoqiure.com/"+keyText.key;
                                        console.log(picUrl);
                                        $("#imgShowurl").val(picUrl)   //將圖片連接顯示在輸入框去
                                    }
                                }
                                xhr.open("POST", url, true); 
                                xhr.setRequestHeader("Content-Type", "application/octet-stream"); 
                                xhr.setRequestHeader("Authorization", "UpToken "+upImgageToken+""); 
                                xhr.send(picBase);
                             }

　　使用七牛雲有好處，可是須要後臺配置很多參數，本人對於後臺不懂，就不說了

　　可是若是沒有使用七牛雲的朋友又該怎麼辦，咱們能夠將base64圖片轉換成blob文件，百度上方法不少，我就隨便找了一種，以下：

function dataURLtoBlob(dataurl) {  //將base64格式圖片轉換爲文件形式
                        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                        while(n--){
                            u8arr[n] = bstr.charCodeAt(n);
                        }
                        return new Blob([u8arr], {type:mime});
                    }

　　最後，在頁面調用函數並傳遞須要裁剪的圖片比例便可，以下：

upImg(1/1)  //裁剪1:1比例的圖片

 流程可見以下： 

 

 

完整dome    隨便百度搞得，也算不上是插件吧，裁剪面板也還有許多功能沒有完善，不過參考cropperjs api 本身想要什麼功能加上就行啦，本身能用就好了，代碼比較渣，亂，大神們輕噴，畢竟才入門不久0.0....