cropper试试

半炒半自创，最后结果是base64拿了，然后怎么处理都行了
     <ul id="listLobby" data-am-widget="gallery" class="am-gallery am-avg-sm-2
  am-avg-md-3 am-avg-lg-4 am-gallery-default" data-am-gallery="{ pureview: true }">
                                        <li>
                                            <div class="am-gallery-item img-block">
                                                <a href="http://s.amazeui.org/media/i/demos/bing-1.jpg" class="">
                                                    <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"
                                                         alt="远方 有一个地方 那里种有我们的梦想"/>
                                                </a>
                                                <div class="am-gallery-desc head-img" style="color: #fff">首图</div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="am-gallery-item img-block">
                                                <a href="http://s.amazeui.org/media/i/demos/bing-1.jpg" class="">
                                                    <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"
                                                         alt="远方 有一个地方 那里种有我们的梦想"/>
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="am-gallery-item img-block">
                                                <a href="http://s.amazeui.org/media/i/demos/bing-1.jpg" class="">
                                                    <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"
                                                         alt="远方 有一个地方 那里种有我们的梦想"/>
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="am-gallery-item img-block">
                                                <a href="http://s.amazeui.org/media/i/demos/bing-1.jpg" class="">
                                                    <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"
                                                         alt="远方 有一个地方 那里种有我们的梦想"/>
                                                </a>
                                            </div>
                                        </li>
                                        <!--<li>-->
                                            <!--<div class="am-gallery-item img-block">-->

                                                    <!--<img class="myimg" />-->

                                            <!--</div>-->
                                        <!--</li>-->
                                         <button class="am-btn am-btn-secondary xzBtn" id="imgReplaceBtn" type="button">更换图片   </button>
                                    </ul>
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>')
	})
	//选择图片，将box显示出来
	$(".xzBtn").click(function(){
		$(".parsetcroBox").show()
		$(".imgBoxyulan").height($(".imgBoxyulan").width())
		$.getScript("js/cropper.js")
	})
	//将选择的图片在裁剪区域显示出来
	$("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')//cropper自带，拿剪掉后的数据
			console.log($imgData);
			var dataurl = $imgData.toDataURL('image/png');  //dataurl便是base64图片、toDataURL canvas的方法包含图片展示的 data URI
			console.log(dataurl);
//dom操作，多图那种
		var li_o=document.createElement('li');
		var div_o=document.createElement('div');
		div_o.setAttribute('class','am-gallery-item img-block');
		var img_o=document.createElement('img');
            img_o.setAttribute('src',dataurl);
            div_o.appendChild(img_o);
            li_o.appendChild(div_o);
           $("#listLobby").append(li_o);
            //
			// $(".myimg").attr("src",dataurl);
			$(".parsetcroBox").remove()
			imgReplaceBtn=1
		})
	});
}