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

转载于:https://www.cnblogs.com/lamb97/p/6547089.html