参考:https://segmentfault.com/a/1190000012344970
资源库:https://pan.baidu.com/s/1hebxWXqnvablSO6xoqK2sQ
<!-- 图片上传cropper -->
<link href="/hqt/static/plugin/cropper/v3.1.6/css/cropper.css" rel="stylesheet" type="text/css" />
<style>
#user-photo {
width: 325px;
height: 195px;
}
#photo {
max-width:100%;
max-height:350px;
}
.img-preview-box {
text-align: center;
}
.img-preview-box > div {
display: inline-block;;
margin-right: 10px;
}
.img-preview {
overflow: hidden;
}
.img-preview-box .img-preview-lg {
width: 150px;
height: 150px;
}
.img-preview-box .img-preview-md {
width: 100px;
height: 100px;
}
.img-preview-box .img-preview-sm {
width: 50px;
height: 50px;
border-radius: 50%;
}
/* ldq 2018年10月30日16:36:50 添加 */
.modal-content{
width: 1100px;
}
@media (min-width: 768px){
.modal-dialog{
width: 1100px !important
}
}
</style>
<button type="button" class="btn btn-info" data-target="#changeModal" data-toggle="modal">上传海报</button>
<!-- ./图片上传start -->
<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>
</div>
<div class="modal-body">
<p class="tip-info text-center">
未选择图片
</p>
<div class="img-container hidden">
<img src="" alt="" id="photo">
</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><!-- ./图片上传end -->
<!-- 图片上传cropper -->
<script src='/hqt/static/plugin/cropper/v3.1.6/js/cropper.js'></script>
<script type="text/javascript">
var initCropperInModal = function(img, input, modal){
var $image = img;
var $inputImage = input;
var $modal = modal;
var options = {
aspectRatio: 5/3, // 纵横比
viewMode: 1,
dragMode:'none',//在裁剪框外拖动鼠标则什么也不做
preview: '.img-preview',// 预览图的class名
autoCropArea:1,//自动显示的裁剪框的大小。因此,数字应当在0~1之间。
cropBoxResizable:false,//是否允许通过拖动裁剪框的边框来调整裁剪框的大小。
minCanvasWidth:500,//canvas(原图)宽度最小值。
minCanvasHeight:300,//canvas(原图)高度最小值。
minCropBoxWidth:1000,//剪切框宽度最小值。
minCropBoxHeight:600,//剪切框高度最小值。
};
// 模态框隐藏后需要保存的数据对象
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:1000,
height:600
}).toBlob(function(blob){
// 转化为blob后更改src属性,隐藏模态框
//$('#user-photo').attr('src',URL.createObjectURL(blob));
let imghtml ='<div class="user-photo-box"><img id="user-photo" src="'+URL.createObjectURL(blob)+'"></div>'
$(".img_left").html(imghtml);
$('#changeModal').modal('hide');
});
}
$(function(){
initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));
});
</script>