利用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....