html5点击修改头像上传图片裁剪代码
html5点击修改头像上传图片裁剪代码
特效描述：html5 点击修改 头像上传 图片裁剪代码，html5点击头像弹出修改头像窗口，上传图片后可设置放大缩小，拖动，翻转自定义修改头像，进行图片裁剪效果代码。
效果图以下
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/amazeui.min.css"> <link rel="stylesheet" href="css/amazeui.cropper.css"> <link rel="stylesheet" href="css/avatar.css">
2. 引入JS
<script src="js/jquery.min.js" charset="utf-8"></script> <script src="js/amazeui.min.js" charset="utf-8"></script> <script src="js/cropper.min.js" charset="utf-8"></script>
3. HTML代码
<div class="up-img-cover" id="up-img-touch" >
<img class="am-circle" alt="点击图片上传" src="img/hu.jpg" data-am-popover="{content: '点击上传', trigger: 'hover focus'}" >
</div>
<div><a style="text-align: center; display: block;" id="pic"></a></div>
<!--图片上传框-->
<div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
<div class="am-modal-dialog up-frame-parent up-frame-radius">
<div class="am-modal-hd up-frame-header">
<label>修改头像</label>
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>×</a>
</div>
<div class="am-modal-bd up-frame-body">
<div class="am-g am-fl">
<div class="am-form-group am-form-file">
<div class="am-fl">
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
</div>
<input type="file" id="inputImage">
</div>
</div>
<div class="am-g am-fl" >
<div class="up-pre-before up-frame-radius">
<img alt="" src="" id="image" >
</div>
<div class="up-pre-after up-frame-radius">
</div>
</div>
<div class="am-g am-fl">
<div class="up-control-btns">
<span class="am-icon-rotate-left" onclick="rotateimgleft()"></span>
<span class="am-icon-rotate-right" onClick="rotateimgright()"></span>
<span class="am-icon-check" id="up-btn-ok" url="/settings/avatar"></span>
</div>
</div>
</div>
</div>
</div>
<!--加载框-->
<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
<div class="am-modal-dialog">
<div class="am-modal-hd">正在上传...</div>
<div class="am-modal-bd">
<span class="am-icon-spinner am-icon-spin"></span>
</div>
</div>
</div>
<!--警告框-->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
<div class="am-modal-dialog">
<div class="am-modal-hd">信息</div>
<div class="am-modal-bd" id="alert_content">
成功了
</div>
<div class="am-modal-footer">
<span class="am-modal-btn">肯定</span>
</div>
</div>
</div>
4. js具体实现
$(document).ready(function(){
$("#up-img-touch").click(function(){
$("#doc-modal-1").modal({width:'600px'});
});
});
$(function() {
'use strict';
// 初始化
var $image = $('#image');
$image.cropper({
aspectRatio: '1',
autoCropArea:0.8,
preview: '.up-pre-after',
});
// 事件代理绑定事件
$('.docs-buttons').on('click', '[data-method]', function() {
var $this = $(this);
var data = $this.data();
var result = $image.cropper(data.method, data.option, data.secondOption);
switch (data.method) {
case 'getCroppedCanvas':
if (result) {
// 显示 Modal
$('#cropped-modal').modal().find('.am-modal-bd').html(result);
$('#download').attr('href', result.toDataURL('image/jpeg'));
}
break;
}
});
// 上传图片
var $inputImage = $('#inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
$inputImage.change(function () {
var files = this.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
$image.one('built.cropper', function () {
// Revoke when load complete
URL.revokeObjectURL(blobURL);
}).cropper('reset').cropper('replace', blobURL);
$inputImage.val('');
} else {
window.alert('Please choose an image file.');
}
}
// Amazi UI 上传文件显示代码
var fileNames = '';
$.each(this.files, function() {
fileNames += '<span class="am-badge">' + this.name + '</span> ';
});
$('#file-list').html(fileNames);
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}
//绑定上传事件
$('#up-btn-ok').on('click',function(){
var $modal = $('#my-modal-loading');
var $modal_alert = $('#my-alert');
var img_src=$image.attr("src");
if(img_src==""){
set_alert_info("没有选择上传的图片");
$modal_alert.modal();
return false;
}
$modal.modal();
var url=$(this).attr("url");
var canvas=$("#image").cropper('getCroppedCanvas');
var data=canvas.toDataURL(); //转成base64
$.ajax( {
url:url,
dataType:'json',
type: "POST",
data: {"image":data.toString()},
success: function(data, textStatus){
$modal.modal('close');
set_alert_info(data.result);
$modal_alert.modal();
if(data.result=="ok"){
$("#up-img-touch img").attr("src",data.file);
var img_name=data.file.split('/')[2];
console.log(img_name);
$("#pic").text(img_name);
}
},
error: function(){
$modal.modal('close');
set_alert_info("上传文件失败了！");
$modal_alert.modal();
//console.log('Upload error');
}
});
});
});
function rotateimgright() {
$("#image").cropper('rotate', 90);
}
function rotateimgleft() {
$("#image").cropper('rotate', -90);
}
function set_alert_info(content){
$("#alert_content").html(content);
}
5. 后台上传逻辑
@Controller
@RequestMapping("/settings")
public class SettingsController {
@PostMapping("/avatar")
@ResponseBody
public UploadController.UploadResult updateAvatar(HttpServletRequest request,
String fileData, String fileName) throws IOException {
UploadController.UploadResult result = new UploadController.UploadResult();
AccountProfile profile = getProfile();
Base64 base64 = new Base64();
byte[] bytes = base64.decode(fileData.substring("data:image/jpeg;base64,"
.length()));
// 检查空
if (null == fileData || StringUtils.isBlank(fileData)) {
return result.error(UploadController.errorInfo.get("NOFILE"));
}
// 检查类型
if (!FileKit.checkFileType(fileName)) {
return result.error(UploadController.errorInfo.get("TYPE"));
}
// 保存图片
try {
String ava100 = Consts.avatarPath + getAvaPath(profile.getId(), 240);
// 上传至七牛云
String path = storageFactory.get().writeToStore(bytes, ava100);
// 更新用户头像
AccountProfile user = userService.updateAvatar(profile.getId(), path);
putProfile(user);
result.ok(UploadController.errorInfo.get("SUCCESS"));
result.setName(fileName);
result.setPath(path);
result.setSize(bytes.length);
} catch (Exception e) {
result.error(UploadController.errorInfo.get("UNKNOWN"));
}
return result;
}
private String getAvaPath(long uid, int size) {
String base = FilePathUtils.getAvatar(uid);
return String.format("/%s_%d.jpg", base, size);
}
}
END~javascript