图片裁剪上传

html 用到的jq插件为cropper
演示官网：https://fengyuanchen.github.io/cropper/

<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">

<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title text-primary">
            <i class="fa fa-pencil"></i>
                        上传头像
            </h4>
        </div>
        <div class="modal-body">
            <p class="tip-info text-center">
                未选择图片
            </p>
            <div class="img-container hidden">
                <img src="" alt="" id="photo">
            </div>
            <div class="img-preview-box hidden">
                <hr>
                <span>150*150:</span>
                <div class="img-preview img-preview-lg">
                </div>
                <span>100*100:</span>
                <div class="img-preview img-preview-md">
                </div>
                <span>30*30:</span>
                <div class="img-preview img-preview-sm">
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <label class="btn btn-danger pull-left" for="photoInput">
            <input type="file" class="sr-only" id="photoInput" accept="image/*">
            <span>打开图片</span>
            </label>
            <button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button>
            <button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
        </div>
    </div>
</div>
</div>

 		<div class="row ">
            <div class="col-md-1 col-sm-1 col-xs-1 f-color2 font14 si-img-text-cent mr-17" style="width: 100px;"><span class="red">*</span>店铺logo：</div>
            <div class="col-md-1 col-sm-1 col-xs-1"><img class="si-img-hw" src="image/up.png" id="shopInfoLogoImg"></div>
            <div class="col-md-6 col-sm-6 col-xs-6" style="margin-top: 55px;" id="uploadfileDiv"><button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">选择文件</button><br/>
			<span class="red">支持上传jpg和png格式，最大5M，建议尺寸200*200</span>
			</div>
        </div>

js

var File5;  //即往服务器上传的file 文件 
var initCropperInModal = function(img, input, modal){
        var $image = img;
        var $inputImage = input;
        var $modal = modal;
        var options = {
            aspectRatio: 1, // 纵横比
            viewMode: 0,
            preview: '.img-preview' // 预览图的class名
        };
        // 模态框隐藏后需要保存的数据对象
        var saveData = {};
        var URL = window.URL || window.webkitURL;
        var blobURL;
        $modal.on('show.bs.modal',function () {
            // 如果打开模态框时没有选择文件就点击“打开图片”按钮
            if(!$inputImage.val()){
                $inputImage.click();
            }
        }).on('shown.bs.modal', function () {
            // 重新创建
            $image.cropper( $.extend(options, {
                ready: function () {
                    // 当剪切界面就绪后，恢复数据
                    if(saveData.canvasData){
                        $image.cropper('setCanvasData', saveData.canvasData);
                        $image.cropper('setCropBoxData', saveData.cropBoxData);
                    }
                }
            }));
        }).on('hidden.bs.modal', function () {
            // 保存相关数据
            saveData.cropBoxData = $image.cropper('getCropBoxData');
            saveData.canvasData = $image.cropper('getCanvasData');
            // 销毁并将图片保存在img标签
            $image.cropper('destroy').attr('src',blobURL);
        });
        if (URL) {
            $inputImage.change(function() {
                var files = this.files;
                var file;
                if (!$image.data('cropper')) {
                    return;
                }
                if (files && files.length) {
                    file = files[0];
                    if (/^image\/\w+$/.test(file.type)) {
    
                        if(blobURL) {
                            URL.revokeObjectURL(blobURL);
                        }
                        blobURL = URL.createObjectURL(file);
    
                        // 重置cropper，将图像替换
                        $image.cropper('reset').cropper('replace', blobURL);
    
                        // 选择文件后，显示和隐藏相关内容
                        $('.img-container').removeClass('hidden');
                        $('.img-preview-box').removeClass('hidden');
                        $('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');
                        $('#changeModal .tip-info').addClass('hidden');
    
                    } else {
                        window.alert('请选择一个图像文件！');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).addClass('disabled');
        }
    }

    var sendPhoto = function(){
        $('#photo').cropper('getCroppedCanvas',{
            width:300,
            height:300
        }).toBlob(function(blob){
            // 转化为blob后更改src属性，隐藏模态框
            $('#shopInfoLogoImg').attr('src',URL.createObjectURL(blob));
            $('#changeModal').modal('hide');
        });
		var photo = $('#photo').cropper('getCroppedCanvas', {
			width: 100,
			height: 100
		}).toDataURL('image/png');
		File5 = dataURLtoFile(photo,"1.png");	//将base64码转换成file
    }
	//base64 转 file 
	function dataURLtoFile(dataurl, filename) {
	  var arr = dataurl.split(',');
	  var mime = arr[0].match(/:(.*?);/)[1];
	  var bstr = atob(arr[1]);
	  var n = bstr.length; 
	  var u8arr = new Uint8Array(n);
	  while(n--){
		  u8arr[n] = bstr.charCodeAt(n);
	  }
	  //转换成file对象
	  return new File([u8arr], filename, {type:mime});
	  //转换成成blob对象
	  //return new Blob([u8arr],{type:mime});
	}
	$(function () {
		initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));
	});