前台代码
<div class="modal" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="avatar-form" action="/upload/savePic" enctype="multipart/form-data" method="post">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title" id="avatar-modal-label">更换头像</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data"id="avatar_data" type="hidden">
<label for="avatarInput">图片上传</label>
<input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
</div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg"></div>
<div class="avatar-preview preview-md"></div>
<div class="avatar-preview preview-sm"></div>
</div>
</div>
<div class="row avatar-btns">
<div class="col-md-9">
<div class="btn-group">
<button class="btn" data-method="rotate" data-option="-90" type="button" title="向左旋转90度"><i class="fa fa-undo"></i> 向左旋转</button>
</div>
<div class="btn-group">
<button class="btn" data-method="rotate" data-option="90" type="button" title="向右旋转90度"><i class="fa fa-repeat"></i> 向右旋转</button>
</div>
</div>
<div class="col-md-3">
<input type="button" class="btn btn-success btn-block " value="保存修改" οnclick="savePic()" />
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<img src="https://img-blog.csdn.net/20160817160824361?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
js代码
<pre name="code" class="javascript">(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node / CommonJS
factory(require('jquery'));
} else {
factory(jQuery);
}
})(function ($) {
'use strict';
var console = window.console || { log: function () {} };
function CropAvatar($element) {
this.$container = $element;
this.$avatarView = this.$container.find('.avatar-view');
this.$avatar = this.$avatarView.find('img');
this.$avatarModal = $("body").find('#avatar-modal');
this.$loading = $("#page-wrapper").find('.loading');
this.$avatarForm = this.$avatarModal.find('.avatar-form');
this.$avatarUpload = this.$avatarForm.find('.avatar-upload');
this.$avatarSrc = this.$avatarForm.find('.avatar-src');
this.$avatarData = this.$avatarForm.find('.avatar-data');
this.$avatarInput = this.$avatarForm.find('.avatar-input');
/*this.$avatarSave = this.$avatarForm.find('.avatar-save');*/
this.$avatarBtns = this.$avatarForm.find('.avatar-btns');
this.$avatarWrapper = this.$avatarModal.find('.avatar-wrapper');
this.$avatarPreview = this.$avatarModal.find('.avatar-preview');
this.init();
}
CropAvatar.prototype = {
constructor: CropAvatar,
support: {
fileList: !!$('<input type="file">').prop('files'),
blobURLs: !!window.URL && URL.createObjectURL,
formData: !!window.FormData
},
init: function () {
this.support.datauri = this.support.fileList && this.support.blobURLs;
if (!this.support.formData) {
this.initIframe();
}
this.initTooltip();
this.initModal();
this.addListener();
},
addListener: function () {
this.$avatarView.on('click', $.proxy(this.click, this));
this.$avatarInput.on('change', $.proxy(this.change, this));
this.$avatarForm.on('submit', $.proxy(this.submit, this));
this.$avatarBtns.on('click', $.proxy(this.rotate, this));
},
initTooltip: function () {
this.$avatarView.tooltip({
placement: 'bottom'
});
},
initModal: function () {
this.$avatarModal.modal({
show: false
});
},
initPreview: function () {
var url = this.$avatar.attr('src');
this.$avatarPreview.empty().html('<img src="' + url + '">');
},
initIframe: function () {
var target = 'upload-iframe-' + (new Date()).getTime(),
$iframe = $('<iframe>').attr({
name: target,
src: ''
}),
_this = this;
// Ready ifrmae
$iframe.one('load', function () {
// respond response
$iframe.on('load', function () {
var data;
try {
data = $(this).contents().find('body').text();
} catch (e) {
console.log(e.message);
}
if (data) {
try {
data = $.parseJSON(data);
} catch (e) {
console.log(e.message);
}
_this.submitDone(data);
} else {
_this.submitFail('Image upload failed!');
}
_this.submitEnd();
});
});
this.$iframe = $iframe;
this.$avatarForm.attr('target', target).after($iframe.hide());
},
click: function () {
this.$avatarModal.modal('show');
this.initPreview();
},
change: function () {
var files,
file;
if (this.support.datauri) {
files = this.$avatarInput.prop('files');
if (files.length > 0) {
file = files[0];
if (this.isImageFile(file)) {
if (this.url) {
URL.revokeObjectURL(this.url); // Revoke the old one
}
this.url = URL.createObjectURL(file);
this.startCropper();
}
}
} else {
file = this.$avatarInput.val();
if (this.isImageFile(file)) {
this.syncUpload();
}
}
},
submit: function () {
if (!this.$avatarSrc.val() && !this.$avatarInput.val()) {
return false;
}
if (this.support.formData) {
this.ajaxUpload();
return false;
}
},
rotate: function (e) {
var data;
if (this.active) {
data = $(e.target).data();
if (data.method) {
this.$img.cropper(data.method, data.option);
}
}
},
isImageFile: function (file) {
if (file.type) {
return /^image\/\w+$/.test(file.type);
} else {
return /\.(jpg|jpeg|png|gif)$/.test(file);
}
},
startCropper: function () {
var _this = this;
if (this.active) {
this.$img.cropper('replace', this.url);
} else {
this.$img = $('<img src="' + this.url + '">');
this.$avatarWrapper.empty().html(this.$img);
this.$img.cropper({
aspectRatio: 1,
preview: this.$avatarPreview.selector,
strict: false,
crop: function (data) {
var json = [
'{"x":' + data.x,
'"y":' + data.y,
'"height":' + data.height,
'"width":' + data.width,
'"rotate":' + data.rotate + '}'
].join();
_this.$avatarData.val(json);
}
});
this.active = true;
}
},
stopCropper: function () {
if (this.active) {
this.$img.cropper('destroy');
this.$img.remove();
this.active = false;
}
},
/*ajaxUpload: function () {
var url = this.$avatarForm.attr('action'),
data = new FormData(this.$avatarForm[0]),
_this = this;
$.ajax(url, {
headers: {'X-XSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
type: 'post',
data: data,
dataType: 'json',
processData: false,
contentType: false,
beforeSend: function () {
_this.submitStart();
},
success: function (data) {
location.reload(true);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
complete: function () {
_this.submitEnd();
}
});
},*/
syncUpload: function () {
this.$avatarSave.click();
},
submitStart: function () {
this.$loading.fadeIn();
},
submitDone: function (data) {
if ($.isPlainObject(data)) {
if (data.result) {
this.url = data.result;
if (this.support.datauri || this.uploaded) {
this.uploaded = false;
this.cropDone();
} else {
this.uploaded = true;
this.$avatarSrc.val(this.url);
this.startCropper();
}
this.$avatarInput.val('');
} else if (data.message) {
this.alert(data.message);
}
} else {
this.alert('Failed to response');
}
},
submitFail: function (msg) {
this.alert(msg);
},
submitEnd: function () {
this.$loading.fadeOut();
},
cropDone: function () {
this.$avatarForm.get(0).reset();
this.$avatar.attr('src', this.url);
this.stopCropper();
this.$avatarModal.modal('hide');
},
alert: function (msg) {
var $alert = [
'<div class="alert alert-danger avater-alert">',
'<button type="button" class="close" data-dismiss="alert">×</button>',
msg,
'</div>'
].join('');
this.$avatarUpload.after($alert);
}
};
$(function () {
return new CropAvatar($('#crop-avatar'));
});
});
</pre><pre code_snippet_id="1835869" snippet_file_name="blog_20160817_7_9761443" name="code" class="javascript">后代代码,剪切 部分
<pre name="code" class="java">public static void cutPNG(InputStream input, OutputStream out, int x,
int y, int width, int height) throws IOException {
ImageInputStream imageStream = null;
try {
Iterator<ImageReader> readers = ImageIO.getImageReadersByFormatName("png");
ImageReader reader = readers.next();
imageStream = ImageIO.createImageInputStream(input);
reader.setInput(imageStream, true);
ImageReadParam param = reader.getDefaultReadParam();
System.out.println(reader.getWidth(0));
System.out.println(reader.getHeight(0));
Rectangle rect = new Rectangle(x, y, width, height);
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0, param);
ImageIO.write(bi, "png", out);
} finally {
imageStream.close();
}
}
</pre>旋转图片部分<pre>
</pre><pre code_snippet_id="1835869" snippet_file_name="blog_20160817_11_8933602" name="code" class="javascript"><pre name="code" class="java"> /**
* 图片根据角度旋转
* @param bufferedimage
* @param degree
* @return
*/
public BufferedImage rotateImage(BufferedImage bufferedimage,
int degree) {
int w = bufferedimage.getWidth();
int h = bufferedimage.getHeight();
int type = bufferedimage.getColorModel().getTransparency();
BufferedImage img;
Graphics2D graphics2d;
(graphics2d = (img = new BufferedImage(w, h, type))
.createGraphics()).setRenderingHint(
RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
graphics2d.rotate(Math.toRadians(degree), w / 2, h / 2);
graphics2d.drawImage(bufferedimage, 0, 0, null);
graphics2d.dispose();
return img;
}
效果图
</pre><pre code_snippet_id="1835869" snippet_file_name="blog_20160817_13_7788550" name="code" class="javascript"><img src="https://img-blog.csdn.net/20160817160927940?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.csdn.net/20160817160934526?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />