Cropper——一个简单方便的图片裁剪插件
<!DOCTYPE html>
<html lang=``"zh-cn"``>
<head>
<meta charset=``"UTF-8"``>
<title>上传头像</title>
<link href=``"https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel=``"stylesheet"``>
<link href=``"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel=``"stylesheet"``>
<style type=``"text/css"``>
body{
text-align: center;
}
#user-photo {
width:300px;
height:300px;
margin-top: 10px;
}
#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%;
}
</style>
</head>
<body>
<button class``=``"btn btn-primary" data-target=``"#changeModal" data-toggle=``"modal"``>打开</button><br/>
<div class``=``"user-photo-box"``>
<img id=``"user-photo" src=``""``>
</div>
</div>
<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>
<script src=``"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"``></script>
<script src=``"https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"``></script>
<script src=``"https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"``></script>
<script type=``"text/javascript"``>
var initCropperInModal = function(img, input, modal){
var $image = img;
var $inputImage = input;
var $modal = modal;
var options = {
aspectRatio: 1,
viewMode: 2,
preview: '.img-preview'
};
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'``);
$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);
$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){
$(``'#user-photo'``).attr(``'src'``,URL.createObjectURL(blob));
$(``'#changeModal'``).modal(``'hide'``);
});
}
$(function(){
initCropperInModal($(``'#photo'``),$(``'#photoInput'``),$(``'#changeModal'``));
});
</script>
</body>
</html>